I have a build a React application and deployed it on Heroku. When I try to load my home page "/" I get no errors and the page loads perfectly. But when I try to navigate to a different page "/RegistrationList" I get the Content Security Policy errors:
I have already searched for a solution online and found that I need to specify a Meta tag in the index.html file inside the public folder of my application. So now this file looks as follows:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
http-equiv="Content-Security-Policy"
content="default-src * 'self' 'unsafe-inline' 'unsafe-eval'"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
...
But at this point I still keep on getting the errors. The strange thing is that the main page ("/") loads perfectly and the second page gives these errors.
Your current CSP within the index.html is useless under a security point of view (you are allowing everything, so this is equivalent as not defining a CSP).
CSP can be defined either in your front-end (index.html) and back-end, and when there is a mismatch, you find all kinds of errors. If you try to remove the CSP meta tag from your index.html and you still get the error, it means the problem is in the server side.
In case of Apache server, this is located in file 'htaccess'. As for Heroku, I don't know exactly where it is. Perhaps this can work:
https://stackoverflow.com/a/57288001/10802411
Related
Basically what I want to achieve is to have main blog post image displayed on the link thumbnail while sharing it on social media like twitter, facebook, etc.
The meta tags that I have in <Helmet> are being added to the website, but they are not properly or as I would expect being read while sharing the link. I assume that is because the values are not yet populated at this moment. But how to fix it? Or what is the correct approach to achive this goal?
Here is how I try to inject meta tags inside of my components:
<Helmet>
<meta property="og:type" content="website"/>
<meta property="og:url" content={`https://blackh3art.dev/blog/${slug}`}/>
<meta property="og:title" content={title}/>
<meta property="og:description" content={short} />
<meta property="og:image" content={formatedimage}/>
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content={`https://blackh3art.dev/blog/${slug}`}/>
<meta property="twitter:title" content={title}/>
<meta property="twitter:description" content={short} />
<meta property="twitter:image" content={formatedimage}/>
</Helmet>
But anywhere I will try to inject meta tags inside of my components it's not working. The only meta tags that are working are these that I have staticly declared in my index.html, and image is read to every link from my website.
Right now application is working in this way:
App context is fetching all the blog posts from my API connected with Sanity
Every component has access to the context
My <BlogPostPage/> component is getting all the data from the context
Website is already deployed so you can see if you want:
main page: https://blackh3art.dev/
blog post: https://blackh3art.dev/blog/25-most-common-questions-asked-on-web3-interview-by-vikram
I was using the CDN release of office-js, but had to change to a local version. After this change, it seems Office.initialize is not being run, which means the add-in doesn't work correctly. On the console, I see the following error:
SCRIPT5022: MicrosoftAjax.js is not loaded successfully.
office.js (18,26767)
The only references to MicrosoftAjax.js that I can find are ASP.NET related, but my project is Typescript/React. Here's how office.js is being loaded in the html:
<!doctype html>
<html lang="en" data-framework="typescript">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>wincross-formatter</title>
</head>
<body class="ms-font-m">
<script src="/assets/office.js"></script>
<div id="container"></div>
</body>
</html>
How can I fix this error?
EDIT:
As per this page, I added the following line just above the office-js script:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
Adding it after the office-js script gives me this error instead of the previous one, and Office.initialize still isn't being called:
SCRIPT5022: Neither the locale, en-us, provided by the host app nor the fallback locale en-us are supported.
FINAL EDIT: That was completely my fault. I didn't copy the contents of office-js/dist recursively.
WebStorm with create-react-app has, in the /public/index.html file, a folder path to /public tagged as %PUBLIC_URL%.
It can't find the directory %PUBLIC_URL% as it doesn't exist, nor should this exist.
Other than suppressing the error with <!--suppress HtmlUnknownTarget -->, is there a way in Webstorm to alias a directory variable like, %PUBLIC_URL%, to the root path of /public for no editor errors in development?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
This article seems to give some more insght on this:
https://medium.com/#jenniferdobak/the-public-folder-and-favicons-in-create-react-app-8dc2cc1d492b
This is a good time to address that funky looking %PULIC_URL% tag. Remember the ‘escape hatch’ React provides in case we put assets in the public folder? During the build, assets prefixed with the %PULIC_URL% tag will be recognized and complied. However this is NOT best practice and should be used only when necessary.
Thus, in most cases, you can replace %PUBLIC_URL% with something like public, but of course, it depends on how you have structured your React project.
I've generated angular(2) project and it generated the following index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FirstAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
As you can see no "script" tag to include any JS bundler. I know this project use webpack but I don't see any reference to it in the index.html file.
After running the project everything works fine. I'll love if someone could tell me how this "magic" happens.
Thanks!
This index.html just acts as a template for webpack. Once you do ng serve or ng build the actual index.html will be generated and saved. If you look into the page source code in the browser, you will see the script tags are there.
I'm using Yeoman and the angular-fullstack generator to bootstrap an angular app. When I do grunt serve or grunt serve:dist everything works as expected.
Now the question is, when I open the index.html file directly in the browser, isn't it supposed to work equally?
So I have a hard time understanding whats tasks grunt is executing here to make it work. Or maybe I am missing something else.
The console tells me:
GET file:///app/8d57a97f.app.css net::ERR_FILE_NOT_FOUND
GET file:///app/47ab0f3e.vendor.js net::ERR_FILE_NOT_FOUND
GET file:///app/01b9b8a8.app.js net::ERR_FILE_NOT_FOUND
The generated index.html looks something like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="app/8d57a97f.app.css"/>
</head>
<body ng-app="myApp">
<!-- some functionality... -->
<script src="app/47ab0f3e.vendor.js"></script>
<script src="app/01b9b8a8.app.js"></script>
</body>
</html>
The reason why I do this:
I try to run the angular app with phonegap on an android device. When I load it to the android mobile, the screen remains blank. So I opened it in the browser and got the same result.
So this is my first attempt to solve this issue.
The problem was the <base href="/"> in the header.
Explanation can be found here (Loading local file in browser referenced css or js).