Would it compromise the security of a website if users were allowed to create img tags with whatever src attribute they wanted?
What kind of damage would be possible?
Allowing arbitrary src values on an <img> element would allow Cross-Site Scripting and thus the execution of arbitrary JavaScript code on your page:
<img src="javascript:…">
It could also be used to forge arbitrary GET requests, similar to Cross-Site Request Forgery but with a referrer originating from your site.
can also be exploited to track your website visitors by using a web bug http://en.wikipedia.org/wiki/Web_bug
Related
I am making a web based chatting platform where people can chat and also they can share files. If any hacker inject a malicious file then there is a risk my website maybe got hacked. I am just thinking about embedding the files shared by users from a different domain name with different hosting so the script will look like -
<iframe src="server-url.com?file=filename.ext" ></iframe >
And iframe src URL will response by
<html>
<head></head>
<body>
<img src="filename.ext" >
</body>
</html>
Is this technique prevent my website from getting hacked? If not, what is the best way to protect my website from malicious files?
Now it all depends on the site you are using the iframe attribute for. If the site is secure and has SSL (Referring to the 3rd party site you are iframing) then you should be good.
Now if you did want to make it secure, you could use the "Sandbox" attribute. I have a link below from W3 schools that explains more about it. Sandbox will usually block most content, but there are attribute values that allow you to make exceptions
For example, let's say your iframe chat uses scripts to function, you could do something like this
<iframe src="server-url.com?file=filename.ext sandbox="allow-scripts"></iframe >
Information about iframe sandbox from W3 schools
I'm trying to extract or just analyze the audio from a vimeo video with the web audio API and was wondering if it's possible and how.
Right now I get the error:
Uncaught TypeError: Failed to execute 'createMediaElementSource' on 'AudioContext': parameter 1 is not of type 'HTMLMediaElement'
… when I try a createMediaElementSource(video) where video is my iframe
Unfortunately I think it is not possible to do what you want. At least not exactly in the way you want it.
The createMediaElementSource() factory function only works with media elements. And those are only <audio/> and <video/> elements. This is why it doesn't work when you use it with the <iframe/> directly.
Normally you would query such a media element for example by its id like this:
document.querySelector('#myAudioElement');
But this is not that easy if the element is inside an <iframe/>. Then it is only possible to query an element if the <iframe/> and the parent document do have the same origin. This is because of the same-origin policy which is a security feature. Imagine what an attacker could do if it was possible to load any page in an <iframe/> and then modify it at will.
Of course it is a hindrance for your use case. Maybe building a browser extension is an option for you because they have usually more privileges and can query the DOM of any page the browser loads.
Alternatively it is also possible to disable the same-origin policy in some browsers. But that is usually only useful during development because you can only disable this policy for the whole browser which is a security problem unless you only open sites that you fully trust.
I've been reading up on HTML5's sandbox attribute for <iframe>s. According to the documentation the sandbox attribute allows a developer to selectively restrict what actions can be done in an <iframe>. Is the sandbox attribute purely a security measure? Does the sandbox attribute enable web designers to implement any new functionality and if so can anyone point to any examples?
Well, it is purely a security feature, but it does allow new functionality as well. Take for example embedding third party (user) content (e.g. HTML files). Traditionally you would need to set up a separate domain from which you would serve that content, now however you can simply serve it from wherever you want to and have it treated as if it's from a separate domain.
On top of that it can prevent this third party content from doing certain things, which you could not have prevented previously like:
allow-top-navigation: Preventing it from breaking out
allow-pointer-lock: Preventing it from taking the cursor hostage
allow-popups: Preventing it from breaking out through popups
allow-scripts: Simply blocking all scripts (could also have been done through CSP)
Realistically the combination of the sandbox attribute combined with controlled CSP headers gives an incredible amount of control to run third party code in a safe environment. It's not 100% there yet, but we're getting quite close.
The sandbox can actually be pretty handy in testing. Consider the following:
tester.html
<script> document.cookie='foo=bar' </script>
<iframe src=testee.html>
testee.html
<script> console.log(document.cookie) </script>
When loading tester.html you will see on the console "foo=bar" which was dumped by testee.html.
Now add to the iframe the sandbox attribute and the cookie is gone - the sandbox created a separate runtime environment for testee.html, where it doesn't get cookie pollution from other pages that were/are open in the browser during the development process. So when you need a sterile test bed but can't or don't want to clear the browser cache, here's a quick and simple solution.
The sandbox attribute does not enable any extra functionality, it only restricts the functionality of the iframe. The only reason to use it is as a security measure.
The iframe sandbox is purely a security feature. A good resource is always the W3 HTML5 specification.
When the attribute is set, the content is treated as being from a unique origin, forms, scripts, and various potentially annoying APIs are disabled, links are prevented from targeting other browsing contexts, and plugins are secured.
In my website with SSL certified URL, I need to include http content for static contents - JS, CSS, Images etc.
E.g. the page at https://www.example.com will refer to http://subdomain.example.com/images/a.jpg.
Is there a way to include HTTP element within HTTPS page, avoiding any security alerts in the browser?
No. The security warnings are there for a reason and cannot be bypassed.
What if someone altered the JS en-route with a man-in-the-middle attack? They could add their own code and have full access to the DOM, making the SSL worthless.
To be secure, you need to load the entire page over HTTPS, not just the HTML document. If you are secure, then the warnings about being insecure will go away.
You don't need to define http:// when calling your static assets. You can use the protocol-relative url, basically you can do this :
<img src="//subdomain.abc.com/images/a.jpg" alt="">
It will get the image through the same protocol as the page you're on.
Paul Irish will explain that better than me on his blog
I don’t think you can bypass security alerts (on browsers that give them) if your https page includes http content. But check whether the references work with https as well (depends on the server of course). If they do, you can use URLs like //subdomain.example.com/images/a.jpg which means that the protocol (http or https) of the page itself will be used.
Is there a way of filtering the data of an iframe output?
For example I'll do an iframe on http://net.tutsplus.com/tutorials/python-tutorials/python-from-scratch-creating-a-dynamic-website/ and I only want to print the div with tutorial_image class. Is that possible?
Iframes sourced from other domains are subject to the Same Origin Policy - this prevents the host page from messing with them. This is a security feature that can be turned off in your browser settings -- but you cannot control this for other users.