[SOLVED] Refused to load the script 'architect://architect.js'

Refused to load the script 'architect://architect.js'

The Solution here appears to have a broken link so i have posted another one

Can't load my world, issue with loading architect://architect.js

Hello I'm Struggling on how to load the

architect.js

in my cordova android project using the wikitude cordova plugin because this keeps showing

Refused to load the script 'architect://architect.js' because it violates the following Content Security Policy directive: "script-src * 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

here is the documentation on how to add the architect.js

https://www.wikitude.com/external/doc/documentation/latest/phonegap/samples.html#including-architectjs-prior-to-wikitude-sdk-53

here is my code

index.html

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="architect://architect.js"></script>
    <title>Hello World</title>
</head>
<body>
    <button onclick="app.fight()" style="width:30%;height:30%;font-size: 30px; margin-top: 40%; margin-left: 30%">Camera</button>

    <textarea id="fem"></textarea>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

index.js

var app = {

// Url/Path to the augmented reality experience you would like to load
arExperienceUrl: "www/index.html",
// The features your augmented reality experience requires, only define the ones you really need
requiredFeatures: [ "image_tracking"],
// Represents the device capability of launching augmented reality experiences with specific features
isDeviceSupported: false,
// Additional startup settings, for now the only setting available is camera_position (back|front)
startupConfiguration:
{
    "camera_position": "back"
},
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
onDeviceReady: function() {
    app.wikitudePlugin = cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");
    app.wikitudePlugin.isDeviceSupported(app.onDeviceSupported, app.onDeviceNotSupported, app.requiredFeatures);
},
// Callback if the device supports all required features
onDeviceSupported: function() {

    app.wikitudePlugin.loadARchitectWorld(
        app.onARExperienceLoadedSuccessful,
        app.onARExperienceLoadError,
        app.arExperienceUrl,
        app.requiredFeatures,
        app.startupConfiguration
    );
},
// Callback if the device does not support all required features
onDeviceNotSupported: function(errorMessage) {
  alert("Device not supported"+ errorMessage);
},
// Callback if your AR experience loaded successful
onARExperienceLoadedSuccessful: function(loadedURL) {
    /* Respond to successful augmented reality experience loading if you need to */
    alert(AR);
},
// Callback if your AR experience did not load successful
onARExperienceLoadError: function(errorMessage) {
    alert(errorMessage);
}
};

app.initialize();

Solution

If you are using any version of the Wikitude SDK higher than 5.3 you have to use

<script src="https://www.wikitude.com/libs/architect.js"></script>

as described in the documentation.