I use JHipster 6.9.1 generator. I insert Google slide iframe in a component :
<div>
<br><br><br>
<iframe src="https://docs.google.com/presentation/d/e/XXX/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
The slider is well displayed when I use localhost:9000 , but not when I use localhost:8080 ( the Slider is blocked). I haven't log error :-s just :
Ce contenu est bloqué. Pour résoudre le problème, contactez le
propriétaire du site.
I try :
slider():SafeResourceUrl {
return this.sanitizer.bypassSecurityTrustResourceUrl("https://docs.google.com/presentation/d/e/XXX/embed?start=false&loop=false&delayms=3000");
}
<iframe iframe [src]='slider()' frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
With the same error.
Thanks for help
Resolve in contentSecurityPolicy (WebSecurityConfigurerAdapter class extend):
#Override
public void configure(HttpSecurity http) throws Exception {
// #formatter:off
http
.csrf()
.disable()
.addFilterBefore(corsFilter, UsernamePasswordAuthenticationFilter.class)
.exceptionHandling()
.authenticationEntryPoint(problemSupport)
.accessDeniedHandler(problemSupport)
.and()
.headers()
.contentSecurityPolicy("script-src 'self' 'unsafe-inline' 'unsafe-eval' https://storage.googleapis.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:")
.and() ...
thanks #Gaël Marziou
Related
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.
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?
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;?
I am setting up my application to test with latest apache-tomcat-8.5.39. When I am trying to load my application on any web browsers few of my resources are not loading properly.
Few resources are not loading properly because of the content-type returned by the web server.
These resources are local resources (taking from servers) :
ex:
CSS:
Request URL: http://localhost:8080/workflow/css/wfstyle.css
Content-Type: text/html;charset=UTF-8
SVG:
Request URL: http://localhost:8080/workflow/images/svg/Delete.svg
Content-Type: text/html; charset=UTF-8
But all CDN are loading properly
Request URL: https://cdn.abc.ocm/assets/1.5.1/css/abc-design-system-ltr.css
content-type: text/css
This is how I am adding SVG to JSP pages:
<span class="esg-icon__container">
<img src="<%=request.getContextPath()%>/images/svg/Delete.svg"></img>
</span>
And CSS to JSP:
<%
if(request.getLocale().getLanguage().contains("ar")){
%>
<link href="https://cdn.abc.ocm/assets/1.5.1/css/abc-design-system-rtl.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/abc-design-system-rtl-custom.css" />
<% } else { %>
<link href="https://cdn.abc.ocm/assets/1.5.1/css/abc-design-system-ltr.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/abc-design-system-ltr-custom.css" />
<%}%>
web.xml from tomcat:
<mime-mapping>
<extension>svg</extension>
<mime-type>image/svg+xml</mime-type>
</mime-mapping>
Expected content-type
For CSS:
content-type: text/css
For SVG:
content-type: image/svg+xml
I did something like this:
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain ) throws IOException, ServletException {
String charEncoding = "UTF-8";
String contentType = "image/svg+xml;";
HttpServletRequest request = (HttpServletRequest) servletRequest;
String file = request.getServletPath();
if(file.contains(".svg")){
if(!contentType.equals(servletResponse.getContentType())) {
servletResponse.setContentType(contentType);
servletResponse.setCharacterEncoding(charEncoding);
}
if(!charEncoding.equals(servletRequest.getCharacterEncoding())) {
servletRequest.setCharacterEncoding(charEncoding);
}
}
filterChain.doFilter(servletRequest, servletResponse);
}
And it worked:
Content-type: image/svg+xml; UTF-8;
Is this a good practice? If no is there any other way of doing the same thing?
I am using Java1.8 and Strust1.2.
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>