I'm making a Firefox extension to open sites on a sidebar. It mostly works except for some sites like mastodon.social and github, I keep bumping into the Cross-Origin Resource Sharing (CORS) policies, which restricts other websites from displaying their content in iframes for security reasons.
How can I avoid that? Just to clarify, I'm not trying to circumvent it, I just want the site to open on my sidebar normally. Other extensions like Webpage Sidebar Viewer show the sites without any issue at all. This is my first extension, so I'm struggling to find the issue.
Here is my code:
MANIFEST.JSON
{
"manifest_version": 2,
"name": "Website Viewer",
"version": "1.0",
"description": "A website viewer with a bookmark feature",
"icons": {
"48": "icons/icon48.png"
},
"sidebar_action": {
"default_title": "Website Viewer",
"default_panel": "panel.html",
"default_icon": {
"48": "icons/icon48.png"
}
},
"permissions": [
"activeTab",
"storage",
"<all_urls>"
]
}
PANEL.HTML
<!DOCTYPE html>
<html>
<head>
<title>Website Viewer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sites"><button id="bookmark">+</button></div>
<script src="panel.js"></script>
</body>
</html>
STYLE.CSS
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
#bookmark {
display: block;
border: 1px;
border-radius:5px;
border-color: gray;
}
#sites {
display: flex;
flex-wrap: wrap;
margin: 10px;
overflow-y: auto;
height: auto;
width: 100%;
}
button {
cursor: pointer;
margin: 5px;
padding: 0;
width: 16px;
height: 16px;
border: none;
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
PANEL.JS
let iframe = null;
function showWebsite(url) {
// If the iframe has not been created yet, create it and add it to the page
if (!iframe) {
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'website-iframe');
document.body.appendChild(iframe);
}
// Set the src attribute of the iframe to the URL of the website to display
iframe.src = url;
// Listen for the iframe's load event and set its sandbox attribute to allow scripts and forms
iframe.addEventListener('load', () => {
iframe.setAttribute('sandbox', 'allow-scripts allow-forms');
});
}
function addBookmark() {
browser.tabs.query({currentWindow: true, active: true}).then((tabs) => {
var site = tabs[0].url;
// If the site is not already in the list of bookmarks, add it
if (!document.getElementById(site)) {
var item = document.createElement('button');
item.setAttribute('id', site);
item.style.backgroundImage = `url("https://s2.googleusercontent.com/s2/favicons?domain=${site}")`;
item.addEventListener('click', () => {
showWebsite(site);
});
document.getElementById('sites').appendChild(item);
browser.storage.local.set({
[site]: true
});
}
});
}
function initialize() {
browser.storage.local.get().then((items) => {
Object.keys(items).forEach((key) => {
var item = document.createElement('div');
item.setAttribute('id', key);
item.textContent = key;
item.addEventListener('click', () => {
showWebsite(key);
});
document.getElementById('sites').appendChild(item);
});
});
}
document.addEventListener('DOMContentLoaded', initialize);
document.getElementById('bookmark').addEventListener('click', addBookmark);
My extension should open any website on the sidebar. Instead, I got an error saying that security measures that avoid loading the site altogether.
