Securing and Optimizing Angular 2 Image URLs - security

I'm building an angular 2 website where only authenticated users can access content. Some of this content is peoples photos, to which access must be restricted to authenticated users only. Furthermore, these images should be delivered in an optimized fashion depending upon the device calling them; for example, a retina mobile screen, or an old-fashioned laptop.
Any ideas about how (or the best practices) to achieve this correctly?

We do something like this, but we don't use angular for it, we use css to determine which images to display. Separate classes with the images attached for them based on viewports. Are you wanting a angular 2 specific answer? Or will the viewports displaying different images work?

Related

acess static files placed in WEB-INF

My requirement is to secure static files so that it cannot be accessed from url.I placed those css and js files inside WEB-INF but now i am not being able to access it from my jsp page.I tried following.
webpages|
WEB-INF|
img|
batman.jpg
test.jsp
now i tried it to acess from jsp page as <img src="../WEB-INF/img/batman.jpg"/> as well as
<img src="img/batman.jpg"/>
but none works.test.jsp is placed outside of web-inf and placing it inside of web-inf is currently not an option for me.I am not using Spring Framework just basic jsp and servlet and i want solution for them.Thnks guys.
As EJP rightfully stated, if you want to embed an image in your page you are bound to access it via an URL. Think of it like that: even though you manage to restrict access to image source (though you won't be able to), user will be able to copy it off the screen, which violates your assumption and which is left to the client.
But of course there are some workarounds to achieve 'second-best' functionality to your problem. I'll list some of them that come to mind:
Put a watermark. Place your images in public folders, but modify the content by providing a watermark to every sensible image. This way you don't restrict the access, but lower the probability of fraudulent behavior after images' exposure;
Modify filenames. You could modify filenames of your images and keep correspondence between 'real' name and artificial name on the server, for example, in a database. This way you'll significantly lower the risk of mass leakage of secured images;
Introduce client side restrictions. You can introduce client side restrictions on your image elements, like disallowing appearance of popup menus, showing full images in dialogs that force user into thinking that image is protected, etc. Of course, anyone with little browser experience will be able to get the content, but basic users won't.
I think that there are many more ways to lower the probability of inappropriate behaviour, but none of these ways reduce that probability to zero. So, you're basically left with opening access to your images, while you may make malicious work harder by putting a watermark on all of your sensible images.
Your requirements are mutually contradictory. You are making a resource inaccessible via a URL and then attempting to access it via a URL.
Make up your mind.

Making a EXISTING CMS site compatible for mobile site NOT REDIRECT

Making a EXISTING CMS site compatible for mobile site NOT REDIRECT
Hi All.
I am currently creating a mobile version of an expression engine site that we use.
I am having problems with this, because typically I can just use media quires, or use redirect scripts.
However, the layout of the mobile site will be completely different from the desktop, so I can't just fiddle with a media quires for the CSS (as site just looks to different).
I was thinking of using a javascript to wipe the code or markup (php) if the device is mobile BUT it would mean perhaps loading two versions of code anytime a page loads up (not good for mobile). Eg one code for desktop and another for mobile.
I can't change the file names eg (mobile_index) because it is a CMS and the links wont link up correctly. I have tried this a few times , and also editing the .HTACCESS file, but it simply didnt work.
So if anyone knows how do I change the code of a page if the device mobile, but cant change file name, directory or any of that :-)
Cheers
Daragh
Why no redirect? If I was in your position, which I was a few months ago, I would handle this totally different:
Install Multiple Site Manager by ExpressionEngine: http://expressionengine.com/user_guide/cp/sites/index.html
Add another site -- mobile
Give it a proper domainname like m.domain.com
Give it its own template group
... and redirect with http://github.com/sebarmeli/JS-Redirection-Mobile-Site/
Now you can manage both installations from the same CMS and both installations can access existing channels, modules, extensions and members. This will keep your code fast and clean.
Adding a bunch of conditionals will only slow down installation.
Actually you could mess with media queries - it's the most flexible. JS is really overkill for something like this. At larger sizes, UL>LI menus could appear, and at smaller sizes they could be hidden (display:none) and swapped to select lists; divs can be replaced, elements dropped or resized. I also combine them with different snippets or embeds so you can tailor the content out as well.
You might try something like MX Mobile Device Detect. It gives you some variables that can detect if the user is on a mobile device that you could use in conditionals in your templates.

Designing a multimedia website for CD

I need to design a mini website to give to clients. The site includes mp3s and videos which must be played within the site itself and not use any 3rd party media players. Is Flash the only / best solution?
I also need to protect these files. Is there a way that I can stop users 'exploring' the CD and not get access to the content?
Flash is a 3rd party component.
You might want to try experimenting with HTML 5 see the link below:
http://www.w3schools.com/html5/html5_audio.asp
This would make your websites functionality dependent on the browser the client is using.
It is unlikely you would be able to prevent users accessing the music files on the CD. Possibly you could store the data on the CD in an encrypted format and make your own custom active x control that decrypts the data on the fly. This would be difficult to do though. Do you mind if I ask why you want to distribute your site on CD? Why don't you just make a website and have user access control on it?

How to create a Mobile Website

I'm working on a project for class. To create a website and a website for mobile users. The site is to recongize the type of device/browser accessing the page and send the appropiate form. So if I was to visit the site on IE8 it will direct me to the mainpage for IE8, if I was to access the site with a mobile device it will direct me to the mobile website main page automatically.
Also, I need to design the website for at least two different screen sizes.
I'm coding in HTML5, I do not know the type of server the site will be hosted on. The use of Javascript is extra credited. The project details are to "design a small mobile web site. The web site should be tested on one or more mobile devices. The iPod Touch device will be used as the base for testing."
I know how to do 8/10 of the requirements (except the two mentioned). I looked at W3C and didn't find anything.
Any help would be much appreciated. Thank you!
Do a Google for:
CSS Browser Detection
JavaScript Browser Detection
Also you should think twice about creating multiple sites - with basically the same content - or creating proper stylesheets that are referred from the same site.
Hope that get's you the other 2 requirements
NOTE: Since this is homework I won't post any links...
I suspect that ServerFault isn't the best place for this question...but aside from that, your question is a little vague. A google search for "designing a mobile website" turns up what looks to be several pages of relevant information. If you first try working with the information in those documents and then come back with specific questions (e.g., "I tried this and it behaved this way instead of the way I expected") you're apt to get better answers.

Mobile Site SEO - Playing Nicely with Google

If I have an iPhone version of my site, what are the things I need to make sure of so it doesn't interfere with SEO?
I've read quite a bit now about cloaking and sneaky javascript redirects, and am wondering how this fits into iPhone and Desktop websites playing together.
If my iPhone site has a totally different layout, where say the Desktop site has a page with 3 posts and 10 images all on the page, and my iPhone site makes that 2 pages, one with the posts, one with the images (trying to think up an example where the structure's decently different), that's probably not best practice for SEO, so should I just tell google not to look at the mobile site? If so, and assuming my client would like to automatically redirect mobile users to the iPhone site (I'm familiar with the id of taking them to the regular page with a link to the mobile version instead), how do I not make this look like cloaking?
Google actually has a separate index and crawler for mobile content. So all you need to do is design your URLs in such a way that you can exclude googlebot from the mobile pages and googlebot-mobile from the regular pages in robots.txt.
Certainly you have the option of telling the search engines to not look at the mobile page. I would leave it though because you never know who is looking for something specific and maybe Google will prefer certain pages over others for mobi users.
If the 2 pages on mobi make sense to the visitor then I would not worry about it for SEO. If you are redirecting based on mobi then I don't see how the search engines could think you are cloaking, but if you want to be totally sure I suggest using CSS to show different information based on Media type.
The only problem I can think of would be of duplicate content. The SEs may see both pages and not rank one as highly because it likes what it sees on the other page. There is no penalty other than the fact that one page is more interesting than the other and may get better rankings whereas the other drops in rank. If you are making two separate pages it would be an opportunity to tune your information to specific details and maybe get hits for both, but if you are using CSS then it will rank as one page.

Resources