i created project using BlippAR Web AR SDK to show simple 3D, for the first step, i think i'll use the template that BlippAR provided but change the *.glb only, but when i try to deploy to my hosting (cpanel), it shown this error
Refused to create a worker from 'blob:https://mywebsite.com/a043c781-5901-4d48-8726-bd3cf6bf37b3' because it violates the following Content Security Policy directive: "default-src * data: 'unsafe-eval' 'unsafe-inline'". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback. Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'blob:' must be added explicitly.
Here's the code that i used for this project
<html>
<head>
<title>WebAR SDK Basic Scene</title>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="webar-sdk/webar-sdk-v1.4.4.min.js"></script>
</head>
<body>
<a-scene
webar-scene="key: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false"
loading-screen="enabled: false"
>
<a-camera webar-camera></a-camera>
<a-assets>
<a-asset-item id="chicken" src="models/chicken.glb"> </a-asset-item>
</a-assets>
<a-entity webar-stage>
<a-entity
gltf-model="#chicken"
id="chicken_1"
rotation="0 0 0"
position="0 0 0"
scale="0.25 0.25 0.25"
webar-loadmonitor="elType: glb"
></a-entity>
</a-entity>
</a-scene>
</body>
</html>
I'm pretty sure that my code is 100% correct. All the dependencies file, such as WebAR SDK, has been put in the right directory and called correctly from the script. So I guess the problem is from the SSL, so I tried to remove the SSL from my Cpanel the access now is from http://, but it's still not working, so I turned on the SSL back.
My expected result is the AR is working properly and can be accessed from my phone (safari/chrome)
Just to rule out any hosting problem, would you please try using the cdn link for the script source - https://webar-sdk.blippar.com/releases/1.4.4/webar-sdk-v1.4.4.min.js
Use:
<script src="https://webar-sdk.blippar.com/releases/1.4.4/webar-sdk-v1.4.4.min.js"></script>
If you choose to use existing script src as shown in your code, please try to use this meta tag in your html file and check:
<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob:;">
If this doesn't solve the problem, you should refer this CSP link as worker is blocked due to the server's Content Security Policy. You would have to change the CSP in your cpanel to allow blob: url .
https://content-security-policy.com/
Also, kindly share this issue on Blippar Developer Community on Slack for faster resolution - https://join.slack.com/t/blippardevelo-req1186/shared_invite/zt-yqkuhklz-rwjr_X_~DijAIpMj0Q7kMA
PS - Also, update your browsers.
Thanks!
Related
I got a issue and can not using
use-places-autocomplete, I have try to fix it but still not resolve it
In env local, I load script google map not get any issue, but env production I got the following error.
Refused to load the script 'https://maps.googleapis.com/maps/api/js?v=weekly&key=xxxxxyyyyyyddđd&libraries=places&language=vi' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com connect.facebook.net www.googleadservices.com www.google-analytics.com googleads.g.doubleclick.net onesignal.com tpc.googlesyndication.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
This is how I try, but still can not fix it:
<meta httpEquiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' developers.google.com maps.googleapis.com https://www.googletagmanager.com https://connect.facebook.net https://www.googleadservices.com https://www.google-analytics.com https://googleads.g.doubleclick.net https://onesignal.com https://tpc.googlesyndication.com;" />
And don't know where the other sources are called from, because I don't use it like: www.googletagmanager.com, connect.facebook.net, www.googleadservices.com, www.google-analytics.com, googleads.g.doubleclick .net,...
Looking forward to all the helpers. Thanks all.
Source:
NextJS: 11.1.2
You are on a right way (I mean an adding maps.googleapis.com into script-src), but looks like you already published CSP via HTTP header, therefore your <meta> tag is not working.
Check if you already have a CSP header, a manual is here.
If you already have a CSP header, you need to make corrections to it, and not publish the second CSP in the meta tag.
It is very likely that your CSP header is published by Helmet middleware, it's in NodeJS dependencies.
I am using webfont loader for fonts on my site, and have the following setup:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" integrity="sha384-pvXSwSU09c+q9mPyY++ygUHWIYRoaxgnJ/JC5wcOzMb/NVVu+IDniiB9qWp3ZNWM" crossorigin="anonymous"></script>
JS
WebFont.load({
google: {
families: ['Libre Franklin']
}
});
And then in my .htaccess I am setting sources for stylesheets as part of my Content Security Policy like so:
style-src 'self' https://fonts.googleapis.com;
But when the site loads the font it is using the http:// source for the font, so it is being blocked by the CSP and I am getting this error message in the console:
Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Libre+Franklin' because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com".
How can I make sure the site is loading the https:// version of the stylesheet?
the library webfonts.js uses location.protocol to adjust the request http or https when your project is in domain under https it will be changed to https
I tried to deploy an angular2-meteor project on meteor server.
The app works well locally. And I already did meteor reset before deploying.
Right now it shows a blank page and error:
EXCEPTION: No Directive annotation found on e
I also tried add https, but same error. What does this error mean? Or what can possibly cause this? Thanks
Please open this page and see Console for more error details.
UPDATE: log file I got using meteor logs xxx.
You should include -dev.js files (for example angular2.dev.js) for Angular2 so you'll be able to see more readable errors and especially on which class you have the problem...
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> <-----
<script src="node_modules/angular2/bundles/router.dev.js"></script> <-----
<script src="node_modules/angular2/bundles/http.dev.js"></script> <-----
Most of time, you have such error when providing something wrong in the directives attribute of a component. For example providers...
Now I found why it shows these errors.
If you met similar problems like these:
EXCEPTION: No Directive annotation found on e
Or
ngDoCheck is not a function when using minified bundles
They are all related with UglifyJS. Right now there is no good way to solve them.
Check here and here
LESS beginner.
Wrote a test html below
<head>
<link rel="stylesheet" type="text/css" href="404.less">
<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>test</body>
But got a warning in Chrome
Resource interpreted as Script but transferred with MIME type text/x-c++: "http://lesscss.googlecode.com/files/less-1.3.0.min.js".
Why?
You probably want your link tag to say:
<link rel="stylesheet/less" type="text/css" href="404.less">
That said, if this is being served from a webserver it could be that that's detecting the mime type wrong from the file extension. If it's an apache server though, there's an easy fix. Add this to/create a .htaccess file in your webroot, containing the line:
AddType text/css less
I had a similar issue with twitter follow-me buttons when I was reviewing local html files in chrome. To fix this I just fired up web matrix 2.0 and pointed at my folder. Hope this helps.
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Language" content = "en"/>
<meta http-equiv = "Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/xxx/app/www/style.css">
Now when I load the page, Safari's inspector gives me:
Resource interpreted as stylesheet but transferred with MIME type text/html
I'm working on localhost with MAMP. I'm not sure what to modify to get this to work. I read that this might be a server problem of some kind.
How do I solve it?
Create an .htaccess file into your root folder (or update the existing one) with this line inside
AddType text/css .css
this will tell apache to send the right content-type header for .css file
There is possibility that not just css resources were interpreted wrongly. It maybe a problem of your webserver configuration.
The best way to check is to go to Chrome -> Network tab and check responses section for each request.
Also you can run $ curl -I http://path_to_file_or_page with terminal and have a look at response, you should see it in following format, e.g. Content-Type: image/jpeg
So, if it will occur that webserver (apache) does it for all filesthen you can try to solve the problem in following way:
Check your /etc/apache2/apache2.conf
If there are any SetHandler application/x-httpd-php line, try to comment it and then reload your apache by $ sudo system apache2 reload
Let us know if the problem is still there.
It could be that your web server is properly configured but it really is returning HTML instead of CSS.
Check that you have the correct path, spelling, case, etc. Hit the URL directly and see what comes back. Your web server might be responding with an error page (HTML) and a 200-Ok instead of a 404-Not Found.
I'm not saying this ever happened to me...