I'm currently working on a browser extension but I'm having problems with web requests.
I developed a password manager with an api and web-ui that users can self-host. Now I'm making an accompanying browser extension, acting like a client. Because the password manager is self-hosted, the url to reach the server (specifically the api) is unique for everyone. When the user sets up the extension, they can enter the url of the server and then the extension will use that as the base url for all it's api requests, making the extension a client of that server.
I'm having two problems with making the web requests (in javascript):
- Just making any web request fails. See:
const data = {
'username': document.getElementById('username-input').value,
'password': document.getElementById('password-input').value
};
fetch(`${localStorage.getItem('base_url')}/api/auth/login?username=${data.username}&password=${data.password}`, {
'method': 'POST'
})
.then(response => {
// catch errors
if (!response.ok) {
return Promise.reject(response.status);
};
return response.json();
})
.then(json => {
sessionStorage.setItem('api_key', json.result.api_key);
window.location.href = 'vault.html';
})
.catch(e => {
console.log(e);
})
Results in the following two errors:
Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
- Reading articles, it looks like I need to add url's to the manifest.json file that requests will be made to. However, the url is "dynamic" because the base url is entered by the user; it's not pre-defined and instead is unique for every user. So how am I going to fix that?
I've looked at these articles and SO posts, but none seem to help: Dev, Medium, SO 1, CSPlite, Csper, SO 2
Thanks in advance for any help :)