I'm working on .net 5 blazor wasm project. I recently updated my Visual Studio 2019 to version 16.10.0. All of a sudden I started getting an error message in my browser (Google Chrome) console as shown below:
Refused to load the script
'https://localhost:44340/_framework/aspnetcore-browser-refresh.js'
because it violates the following Content Security Policy directive:
"script-src 'sha256-fa5rxHhZ799izGRP38+h4ud5QXNT0SFaFlh4eqDumBI='".
Note that 'script-src-elem' was not explicitly set, so 'script-src' is
used as a fallback.
I don't have _framework/aspnetcore-browser-refresh.js added in my index.html. Here is the scripts and styles declaration in my index.html
styles declared inside <head> in index.html:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>App</title>
<base href="/" />
<link href="css/site.css" rel="stylesheet" />
<link href="Web.styles.css" rel="stylesheet">
<link href="_content/BlazorDateRangePicker/daterangepicker.min.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>
scripts in index.html:
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/Chart.js"></script>
<script src="js/print.js"></script>
<script src="js/pdf.js"></script>
<script src="_content/BlazorDateRangePicker/clickAndPositionHandler.js"></script>
<script src="js/blazorInterop.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
But when I launch the app via visual studio, from the browser I can see that _framework/aspnetcore-browser-refresh.js gets appended to scripts section in my index.html. Here is the screen print.
This is anything related to my configuration error? or I need to setup CSP in my index.html? Please assist.
Looks like /_framework/aspnetcore-browser-refresh.js script belongs to a new Hot Reload feature.
Something was broken due to upgrade because message: it violates the following Content Security Policy directive: "script-src 'sha256-fa5rxHhZ799izGRP38+h4ud5QXNT0SFaFlh4eqDumBI='" says thay you have CSP script-src 'sha256-fa5rxHhZ799izGRP38+h4ud5QXNT0SFaFlh4eqDumBI=', but at the same time you load a lot of scripts:
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/Chart.js"></script>
<script src="js/print.js"></script>
<script src="js/pdf.js"></script>
<script src="_content/BlazorDateRangePicker/clickAndPositionHandler.js"></script>
<script src="js/blazorInterop.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
At least you need to have 'self' in the script-src directive. Also the sha256-fa5rxHhZ799izGRP38+h4ud5QXNT0SFaFlh4eqDumBI= hash value does not match the hash of your navigator.serviceWorker.register('service-worker.js'); inline script.
You should have a lot of CSP errors in the console.
Related
I have deployed my .NET Core web app to aws using ubuntu server 18. I am able to hit my dns in browser and the browser loads the html, data and code, but does not load and css files, js or any scripts I have add to layout.cshtml. I have tried rebuilding, changing paths and researching it. People have similar issues online, but their fixes are not related to mine.
I run
dotnet publish --output ".\published" --configuration release
Inside of this folder I have runtimes folder and wwroot. Inside wwwroot I have css folder, js folder, and lib folder with all the files in each folder that I need.
In layout.cshtml I have my links and script paths like this
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/published/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/published/wwwroot/css/site.css" />
<link rel="stylesheet" href="~/published/wwwroot/css/linkView.css" />
</head>
<footer class="border-top footer text-muted">
</footer>
<script src="~/published/wwwroot/lib/jquery/dist/jquery.min.js"></script>
<script src="~/published/wwwroot/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/published/wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/published/wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/published/wwwroot/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
I did recently add published/wwwroot/ to each path just trying to see if that would fix it but it did nothing.
And in the browser I get these errors:
Basically all 404 errors, it cannot find my files and I do not understand why. Anyone have this issue or see the problem? Thanks!
Your paths are wrong. Please try to remove /published/wwwroot
E.g.: <link rel="stylesheet" href="~/published/wwwroot/css/site.css" />
should be <link rel="stylesheet" href="~/css/site.css" />
I have a Vuejs app that I'm trying to serve via a Golang backend that will also serve the app's API.
When I build and run the Vuejs via "npm run build" and "serve -s dist" and go to the static server's location, everything loads up fine. But when I try to load it through the Golang backend, even though the index.html loads (as verified by checking the source in the browser), I just get a blank white page.
Is this approach not possible? Am I going about this all wrong?
Here is how I am serving the "dist" folder via Golang.
http.Handle("/", http.StripPrefix("/", http.FileServer(http.Dir(htmlFolder+"/dist/"))))
My index.html file:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>TestApp</title>
<link href=/css/app.52c62e82.css rel=preload as=style>
<link href=/css/chunk-vendors.7724753e.css rel=preload as=style>
<link href=/js/app.9a3ab992.js rel=preload as=script>
<link href=/js/chunk-vendors.6808fe3a.js rel=preload as=script>
<link href=/css/chunk-vendors.7724753e.css rel=stylesheet>
<link href=/css/app.52c62e82.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but TestApp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app></div>
<script src=/js/chunk-vendors.6808fe3a.js></script>
<script src=/js/app.9a3ab992.js></script>
</body>
</html>
Edit:
I also tried using gorilla/mux example here:
https://blog.questionable.services/article/vue-react-ember-server-golang/
And here is my "dist"'s folder structure.
press F12 on your browser and go to console tab to view the error
Turns out I just needed to empty my caches. I was using FN5 when refreshing assuming that that would reload it.
I have deployed vue js application in IIS in default website but it's not loading assets due to it is deployed in a sub folder of default website . Kindly help me to set recommended configuration to resolve this issue.
Screenshots are available here:
Figure 1: Errors
Figure 2: Site Basic Setting
Figure 3: Site Advance Setting
Figure 4: Folder Structure
first, apply the iis_iusrs and iusr full control permission to the site folder.
then open your index.html file and set the format of all the CSS and js file links shown as below :
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=favicon.ico><title>my-vueapp</title>
<link href=css/app.7fafd6a0.css rel=preload as=style>
<link href=js/app.3ddf6310.js rel=preload as=script>
<link href=js/chunk-vendors.763c0f03.js rel=preload as=script>
<link href=css/app.7fafd6a0.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but my-vueapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript><div id=app></div>
<script src=js/chunk-vendors.763c0f03.js></script>
<script src=js/app.3ddf6310.js></script>
</body>
</html>
and another is you also need to set the link for the logo so find the appropriate js file and also change the link of the logo:
below is my iis site setting:
I've added keystone to my existing MERN server with webpack. Server started with no error.
However, when I try to access /keystone/signin (which redirected by /keystone) it gives a blank page and console error Uncaught SyntaxError: Unexpected token < from signin?from=/keystone/js/packages.js:1 and signin?from=/keystone/js/signin.js:1
The content in signin.js is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sign in to OneCharge</title>
<link rel="stylesheet" href="/keystone/styles/keystone.min.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="signin-view"></div>
<script>
var Keystone = {"adminPath":"/keystone","brand":"My Site","csrf":{"header":{"x-csrf-token":"vIRAZlZwZae640a645fd60ed9e8ca9911111a05ce088c8095c"}},"from":"/keystone/js/signin.js","userCanAccessKeystone":false};
</script>
<script src="/keystone/js/packages.js"></script>
<script src="/keystone/js/signin.js"></script>
</body>
</html>
Any hints to solve that could help.
I found a solution to the problem, answering my own question here.
Turns out following the guide here doesn't work for me How to add keystone to an existing express app.
After looking up the code from keystone repository. I found a test project that have everything I need and maybe other people who want to use keystone.
I followed the configuration from the test project repo and work like a charm!
I have a map with google maps api, and a table, which I want to connect to the map with dHTMLx Layout. (I'm a beginner, so sorry about the question, but I haven't found any solution yet, and I already checked the references in the code) I have this code:
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<title>Map</title>
<link rel="stylesheet" type="text/css" href="dhtmlxlayout_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="dhtmlxlayout.css">
<script type="text/javascript" src="dhtmlxlayout.js"></script>
<script type="text/javascript" src="dhtmlxcommon.js"></script>
<script type="text/javascript" src="dhtmlxcontainer.js"></script>
<script type="text/javascript" src="dhtmlxlayout_deprecated.js"></script>
</head>
<body>
<script>
var dhxLayout = new dhtmlXLayoutObject(document.body, "2U");
dhxLayout.cells("a").setText("Térkép");
dhxLayout.cells("a").attachURL("googleapi.html");
dhxLayout.cells("b").setText("Táblázat");
dhxLayout.cells("b").setWidth(500);
dhxLayout.cells("b").attachURL("list.html");
</script>
</body>
What does the 2 error means? ReferenceError: dhtmlxCellObject is not defined & TypeError: this._hdrInit is not a function both in dhtmlxlayout.js
What should I correct? The googleapi.html and list.html are working fine separate.
Thanks!
There is a special option for using google maps in dhtmlx layout - attachMap
Online sample
and
Documentation
will help you
By the way Google doesn't allow to use its servise in iframes
Plus if you don't use deprecated dhtmlx methods, you don't need to include this file in the page