Let's say I load jQuery from a separate domain and host. Can this other host some how detect from which page it was requested from?
For example:
Can www.page-b.com somehow know that the link was requested from page www.page-a.com/subpage?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>this page is www.page-A.com/subpage</title>
<meta charset="utf-8">
</head>
<body>
<script src="http://page-B.com/js/jquery.min.js"></script>
</body>
</html>
You have to check the HTTP Referrer field of the request. How this is done depends highly on the used programming language.
The referer field contains the URL of provenience of the request, which is exactly what you need.
More information at https://en.wikipedia.org/wiki/HTTP_referrer
Related
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
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.
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 trying to work with an Angular app I don't know so much about. It uses TypeScript Angular 1.5. I need to be able to change the page's title. This is what I have to work with. I'm not sure how it works without ng-app specified, but it works.
Is there a way to set the title in the head dynamically? Or would I need to change the ng-controller attr to the html element? If so how could it affect the system?
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>MySajt</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/styles.css" rel="stylesheet">
</head>
<body ng-controller="AppController as vm" ng-class="{ 'v-dolj-overflow': vm.togglaScroll }">
<my-header></my-header>
<div class="v--header-offset" ui-view></div>
<script src="js/app.js"></script>
<script src="js/angular-locale_sv.js"></script>
</body>
</html>
It is not good idea to work with document or window directly. There are some better solutions.
Your own solution
If you want use plain old JavaScript you have to use at least $document or $window providers to implement it.
Reasons to use them is: AngularJS providers are testable. If you write tests for your application you can mock $document or $window. So you will be able to cover all methods and lines by unit tests.
Custom module
One of the solutions is to use some custom module. Just an example: http://ngmodules.org/modules/ngTitle. There module is not much code.
You should be able to accomplish this with document.title regardless of where the controller lives
https://developer.mozilla.org/en-US/docs/Web/API/Document/title
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).