BlippAR Web AR SDK Refused to Create a Worker

176 Views Asked by At

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)

1

There are 1 best solutions below

0
On

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!