CSP Cross-Origin request blocked errors for Youtube embed videos - nginx

I do get the following errors and warnings on the firefox console logs, but nothing displays on the Chrome console logs.
errors such as,
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://googleads.g.doubleclick.net/pagead/id. (Reason: CORS request did not succeed). Status code: (null).
warnings such as,
Some cookies are misusing the recommended “SameSite“ attribute
The resource at “<URL>” was blocked because content blocking is enabled.
following are a similar sample of static HTML code and Nginx config file.
HTML,
<!DOCTYPE html>
<html lang="ja">
<head>
<title>title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Security-Policy" content="frame-src youtube.com www.youtube.com">
<link rel="stylesheet" href="styles.css" type="text/css" />
<script
src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"
type="text/javascript"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ['Noto Sans JP:100,300,regular,500,700,900:japanese,latin'],
},
});
</script>
</head>
<body class="body">
<div class="video">
<div class="yt-video">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" title="test" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
nginx headers & security policy headers in the server block as follows,
add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' *.youtube.com *.googleapis.com; frame-src 'self' *.youtube.com; object-src 'self'";
add_header X-Frame-Options "SAMEORIGIN";
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
I would like to know how to get rid of these errors if possible or should i just ignore, any kind of advice would be helpful.
Thank you.

Related

Nginx SSI - respecing links (with scripts and styles) included by html pointed by proxy-pass

I am total Nginx newbie and I am doing my best to compose a UI. Let me give You my short nginx config file:
upstream wizard {
server wizard:80;
}
server {
listen 80;
server_name localhost;
ssi on;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
location /wizard {
proxy_pass http://wizard;
}
}
and the "master" html with SSI command:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portal</title>
</head>
<body>
<h1>Portal</h1>
<!--#include virtual="/wizard" -->
</body>
</html>
and the index.html from the location pointed by the proxy;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My web</title>
<h2>IPA</h2>
<script type="module" crossorigin src="/assets/index.41982ecd.js"></script>
<link rel="modulepreload" href="/assets/vendor.d39310c0.js">
<link rel="stylesheet" href="/assets/index.f1b61ee0.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
Now this lines from the last html are problematic:
src="/assets/index.41982ecd.js"
href="/assets/vendor.d39310c0.js"
href="/assets/index.f1b61ee0.css"
Because I get 404 not found. The problem is obvious, nginx fetches the html, does SSI and then the browser tries to load the script, css which are not there (they are in the site pointed by the proxy). I can solve this by adding next location in the nginx config:
location /assets {
proxy_pass http://wizard;
}
But is there another way? I can imagine I will have more web pages with asset folders. I can do the renames but yeah... I am looking for other options to solve this.

Develop Chrome extension that connects to redux store in web page

I am trying to develop a simple chrome extension that connects to an existing redux store running in a page in a tab.
I have a helloworld chrome extension running with a v3 manifest.
My html for my popup looks like :
<html>
<head>
<link rel="stylesheet" href="monitor.css">
<script src="chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/redux-devtools-extension.js"></script>
</head>
<body>
<div class='container' >
<div>
<label>Redux Dev Tools</label>
<button id='connect' >Connect</button>
</div>
<div>
<select id='action'>
<option id=1>SIGNED_IN</option>
<option id=1>SIGNED_OUT</option>
<option id=1>FETCH_ALL_BRAND_LINES</option>
</select>
<button id='sendAction' >Dispatch</button>
</div>
</div>
<div class='container'>
<div class='logWindow' id='log'>Log</div>
</div>
<script src="monitor.js"></script>
</body>
</html>
The problem comes from trying to load the js from the redux-devtools plugin.
Refused to load the script
'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/redux-devtools-extension.js'
because it violates the following Content Security Policy directive:
"script-src 'self'"
My manifest file content-security is configured as follows :
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline';"
},
But I am really struggling to understand what I need to do to allow this script to be loaded.
Can anyone suggest what I should try?

Failed to execute 'createPolicy' on 'TrustedTypePolicyFactory': Policy "goog#html" disallowed

If I run the GoogleTagManager with CSP I get the following error
Failed to execute 'createPolicy' on 'TrustedTypePolicyFactory': Policy
"goog#html" disallowed.
My header script looks like this
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
<script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-XXX&l=dataLayer&cx=c"></script>
<script id="GTMscript" data-cookieconsent="ignore" async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="XXXX" data-blockingmode="auto" type="text/javascript"></script>
<meta http-equiv='Content-Security-Policy'
content="
default-src 'self';
frame-src 'self' https://consentcdn.cookiebot.com;
img-src 'self'https://storage.googleapis.com ;
font-src 'self';
base-uri 'none';
connect-src 'self' https://www.google-analytics.com ;
script-src 'self'https://consent.cookiebot.com https://consentcdn.cookiebot.com 'unsafe-inline' 'unsafe-eval' 'strict-dynamic';
style-src 'self' 'unsafe-inline';
trusted-types angular angular#unsafe-bypass;">
I'm just beginning to implement TrustedTypes and found this question when checking for Google's compatibility with TrustedTypes.
Have you tried updating trusted-types angular angular#unsafe-bypass; with trusted-types angular angular#unsafe-bypass goog#html;?

Mpeg-dash support in nginx

I searched enough but couldn't sort out how to configure mpeg-dash vod in nginx using nginx_vod_module .
Configuration inside http server block for enabling dash is
location /voddash {
vod dash;
vod_mode local;
root /usr/share/nginx/html;
gzip on;
gzip_types application/dash+xml mpd;
add_header Access-Control-Allow-Headers "origin,range,accept-encoding,referer";
add_header Access-Control-Expose-Headers "Server,range,Content-Length,Content-Range";
add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS";
add_header Access-Control-Allow-Origin "*";
expires 100d;
add_header Last-Modified "Sun, 19 Nov 2000 08:52:00 GMT";
}
Request url is http://localhost/voddash/Input.mp4/manifest.mpd .
I have placed only Input.mp4 in dash location. How can i stream dash content .Also is there anything like streaming of precreated manifest and chunks in nginx for mpeg dash?
I have the same configuration on my server and use the following html + js code to play the dynamically generated manifest.mpd file:
<!doctype html>
<html>
<head>
<title>Dash.js Rocks</title>
<style>
video {
width: 640px;
height: 360px;
}
</style>
</head>
<body>
<div>
<video id="videoPlayer" controls></video>
</div>
<script src="http://dashif.org/reference/players/javascript/nightly/dash.js/dist/dash.all.min.js"></script>
<script>
(function(){
var url = "http://localhost/voddash/Input.mp4/manifest.mpd";
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), url, true);
})();
</script>
</body>
</html>

supervisord web interface doesnt allow external connections

this is my supervisord web config, with no password
[inet_http_server]
port=127.0.0.1:9001
;username=user
;password=1234
and this is my nginx config for it
location /supervisor/ {
proxy_pass http://127.0.0.1:9001;
proxy_set_header X-Forwarded-Host $server_name;
proxy_set_header X-Real-IP $remote_addr;
add_header P3P 'CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV"';
}
If I access 127.0.0.1:9001 directly from within my server I get the info I need:
root#gosthost:~# curl 127.0.0.1:9001
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Supervisor Status</title>
<link href="stylesheets/supervisor.css" rel="stylesheet" type="text/css" />
<link href="images/icon.png" rel="icon" type="image/png" />
</head>
<body>
<div id="wrapper">
... bla bla bla
</div>
<div class="clr" id="footer">
<div class="left">
Supervisor <span>3.1.3</span>
</div>
<div class="right">
© 2006-<span>2015</span> <strong>Agendaless Consulting and Contributors</strong>
</div>
</div>
</body>
but if I try to access it from outside world it gives me 404:
root#gosthost:~# curl http://46.101.172.89/supervisor/
<head>
<title>Error response</title>
</head>
<body>
<h1>Error response</h1>
<p>Error code 404.
<p>Message: Not Found.
</body>
But that's not nginx's native response. I can see that because nginx signs its own error responses, see below. This is typical nginx response
curl http://46.101.172.89/media/
<html>
<head><title>403 Forbidden</title></head>
<body bgcolor="white">
<center><h1>403 Forbidden</h1></center>
<hr><center>nginx/1.6.2</center>
</body>
</html>
so there is something wrong with supervisor. What could that be?
little bit late, but I had the same problem and was trying everything and found solution
proxy_pass http://127.0.0.1:9001/;
you missed / :)

Resources