i'm trying to access a distant website from my local website in wampserver.
I found that i should activate the CORS using :
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
Header set Access-Control-Allow-Credentials: true
</IfModule>
but should this code be added in the source website (the one i created in local) or in the destination website (the one i'm trying to access) ?
thnx a lot in advance.
The site hosting the HTML document in which the JavaScript runs has to be given permission by the other site in order to read data from it (or to send preflighted requests to it).
Related
I have a Netlify CDN pulling files via my GitHub, and everything works perfectly fine it seems, except loading the fonts. I'm rather new to CDNs but have been researching and learning a lot.
But... I've spent 4 hours researching how to enable this, and the only thing I can find in their documentation or anyone else with similar problems, is that I need to create a _header file in the root directory, but they don't specify anything to do with the fonts. They just tell me this example code.
Site link:
https://www.netlify.com/docs/headers-and-basic-auth/
Example Header:
## A path:
/templates/index.html
# Headers for that path:
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
/templates/index2.html
X-Frame-Options: SAMEORIGIN
Does anyone have any experience with this? I'm about to go find a new CDN, but not sure who else is reliable.
Netlify allows for you to setup Headers in your pages using a structured configuration in the netlify.toml file.
To add a header for the woff content type you need a header equivalent of:
/*.woff
Access-Control-Allow-Origin: *
Content-Type: application/font-woff
Using the Netlify Tool to test valid headers, your settings in the config would be:
netlify.toml
[[headers]]
for = "/*.woff"
[headers.values]
Access-Control-Allow-Origin = "*"
Content-Type = "application/font-woff"
The netlify.toml file exists at the root of the site on Netlify.
The paths need to be valid also and the above is just an example.
The file _headers in the root directory can be used for configuration of headers according to the documentation https://www.netlify.com/docs/headers-and-basic-auth/.
The following examples demonstrates how all ttf and woff fonts in the directory /assets/fonts/ and its sub directories can be given access from any origin.
# Custom Netlify Headers
# https://www.netlify.com/docs/headers-and-basic-auth/
/assets/fonts/*.woff
Access-Control-Allow-Origin: *
Content-Type: application/font-woff
/assets/fonts/*.ttf
Access-Control-Allow-Origin: *
Content-Type: application/font-ttf
I am tinkering around with webpages on a LAMP server running Apache2 and was wondering if it was possible to make a directory accessible only to your web pages and not from outside?
Example scenario:
Directory to protect: dir1 containing images (jpg, png)
My own webpage: mypage.html that calls images from dir1
My website: www.myweb.com that contains both dir1 and mypage.html
Currently, files inside the website can be accessed via www.myweb.com/dir1/somefile.jpg or by calling mypage.html
I would like it to only be accessible by calling mypage.html
I have tried the following:
modifying .htaccess to disallow access of image types
<files "*.jpg">
deny from all
</files>
(doesn't work because mypage.html cannot access it either)
Modify apache2 conf file with:
<Directory /var/www/dir1>
AllowOverride None
<Limit GET POST OPTIONS>
Order deny,allow
Deny from all
</Limit>
</Directory>
(this actually semi-worked as it allowed me to write to directory but not read, maybe this can be modified to allow requests coming from internal web pages to go through?)
I guess to conclude, is there a way to get Apache2 to ONLY accept requests to access a directory if it is of a certain url of your choosing?
Thanks in advance.
So, I've decided that the approaches I've taken so far really don't cut it and found you could actually call a php function where
<img src='somefile.php?query=xxx' alt='pic'>
and where in the somefile.php I have that takes in img file name created from the query above.
echo file_get_contents($imgresource);
By serving the image from a php script and blocking this php script from being called without proper credentials, sessions, cookies and IP blocking, there is some security set.
So I guess it doesn't really answer the question in its entirety of blocking access only to some URLs but it works for the purpose of not being able to be accessed externally since I have buried the directory below (or above?) the web root directory where it can't be called from a url and only from internal script.
I have this line in a css file of my project:
#import url(http://reset5.googlecode.com/hg/reset.min.css);
That results in an error when I load the page when it's on my webserver
XMLHttpRequest cannot load http://reset5.googlecode.com/hg/reset.min.css. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mydomain.ca' is therefore not allowed access. The response had HTTP status code 403.
I've read that the server hosting the .css file has to add an Access-Control-Allow-Origin * thing on their web server but I'm not owning this so...
(I've also tried to add this
location ~* \.(eot|ttf|woff|css)$ {
add_header Access-Control-Allow-Origin *;
}
in my nginx config and it didn't help, but I don't think I have to change anything on my web server, do I?)
This is a common error when the external file is not allowed to be accessed in some cases.
Instead of linking to the Google file, it would be better to host the file yourself, and link to it on your own server.
Download the file, and save in the css folder (or wherever you like), and then link to it using "link rel".
This will solve your problem.
I've been reading about Access-Control-Allow-Origin because it seems effective at allowing cross domain requests since I have access to the external site. My question ism how do I use Access-Control-Allow-Origin to allow cross domain requests. I tried this (don't laugh) (by the way all I want is for a single number, 1 or 0 to be returned)
<html>
<head>
Access-Control-Allow-Origin: *
</head>
<body>
1
</body>
</html>
Am I close? Thanks for your help. If there is an easier way to do a simple cross-domain request let me know.
There are 3 ways to allow cross domain origin (excluding jsonp):
Set the header in the page directly using a templating language like PHP. Keep in mind there can be no HTML before your header or it will fail.
Modify the server configuration file (apache.conf) and add this line. Note that "*" represents allow all. Some systems might also need the credential set. In general allow all access is a security risk and should be avoided:
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials true
To allow multiple domains on Apache web servers add the following to your config file
SetEnvIf Origin "http(s)?://(www\.)?(example.org|example.com)$" AccessControlAllowOrigin=$0$1
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Credentials true
For development use only hack your browser and allow unlimited CORS using the Chrome Allow-Control-Allow-Origin extension
Disable CORS in Chrome: Quit Chrome completely. Open a terminal and execute the following. Just be cautious you are disabling web security:
open -a Google\ Chrome --args --disable-web-security --user-data-dir
That is an HTTP header. You would configure your webserver or webapp to send this header ideally. Perhaps in htaccess or PHP.
Alternatively you might be able to use
<head>...<meta http-equiv="Access-Control-Allow-Origin" content="*">...</head>
I do not know if that would work. Not all HTTP headers can be configured directly in the HTML.
This works as an alternative to many HTTP headers, but see #EricLaw's comment below. This particular header is different.
Caveat
This answer is strictly about how to set headers. I do not know anything about allowing cross domain requests.
About HTTP Headers
Every request and response has headers. The browser sends this to the webserver
GET /index.htm HTTP/1.1
Then the headers
Host: www.example.com
User-Agent: (Browser/OS name and version information)
.. Additional headers indicating supported compression types and content types and other info
Then the server sends a response
Content-type: text/html
Content-length: (number of bytes in file (optional))
Date: (server clock)
Server: (Webserver name and version information)
Additional headers can be configured for example Cache-Control, it all depends on your language (PHP, CGI, Java, htaccess) and webserver (Apache, etc).
<?php header("Access-Control-Allow-Origin: http://example.com"); ?>
This command disables only first console warning info
console
Result:
console result
If you are using npm and want to load some files/folders allowing cross origin resource sharing(CORS) try the following,
install the http-server:
npm install http-server -g
Go to your files/folders folder and run the command below to make your files/folders available at http://127.0.0.1:8080 . This a good choice when you want to keep the files in a safe place and control who can request inferences to it. The -c1 parameter is added to disable caching, and
the --cors flag enables cross origin resource sharing(CORS) allowing the hosted files to be used by the client side JavaScript for a given domain.
http-server -c1 --cors .
It worked for me in WSL-ubuntu terminal on windows 10. It should work with npm CLI on any OS.
Thank you.
If you use Java and spring MVC you just need to add the following annotation to your method returning your page :
#CrossOrigin(origins = "*")
"*" is to allow your page to be accessible from anywhere.
See https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin for more details about that.
I want to load .cache.html file of GWT application on client side ( Browser )
but now when I load my application on browser each time .cache.html file is downloaded from the server
I don't want it to be downloaded on each request , because it's too heavy
Please suggest me solution
Thanks
The GWT documentation includes example cache settings for .htaccess on Apache.
<Files *.nocache.*>
ExpiresDefault "access"
</Files>
<Files *.cache.*>
ExpiresDefault "now plus 1 year"
</Files>
You need to configure your server to tell the client to cache that file. All the files with 'cache' in their filename should be configured that way.
It can get a little tricky when you have apache serving as proxy for tomcat. Here is how I am doing it.