I'm trying to develop a simple Chrome extension to display a page from a CSP-restricted google domain, in a popup opened on click. What is the simplest way to embed the page?
The page I am trying to embed has a Content Security Policy (CSP) that disallows frame-ancestors
, so an <iframe>
of the page won't work. Specifically, the page is the Google Tasks sidebar: https://tasks.google.com/embed/?origin=https://mail.google.com&fullWidth=1
A basic version of the extension would look like this:
manifest.json
{
"manifest_version": 2,
"name": "Google Tasks",
"version": "1.0",
"description": "",
"browser_action": {
"default_icon": "images/tasks-19x19.png",
"default_title": "Google Tasks",
"default_popup": "popup.html"
},
"permissions": [
"contextMenus",
"notifications",
"tabs",
"http://tasks.google.com/",
"http://mail.google.com/"
]
}
popup.html
<!DOCTYPE html>
<html>
<body>
<iframe src="https://tasks.google.com/embed/?origin=https://mail.google.com&fullWidth=1"></iframe>
</body>
</html>
This example leads to this error in console (because of the CSP)
Refused to display 'https://tasks.google.com/embed/?origin=https://mail.google.com&fullWidth=1' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://mail.google.com".
I understand I could intercept the CSP (as referenced) and overwrite the frame-ancestors property but I wonder if there is a better way to embed this page I'm trying to embed?