Access-Control-Allow-Origin error for Webfonts on Firefox/Mac - .htaccess

i try to load some web fonts from webtype but on Firefox/Mac i always geht an Access-Control-Allow-Origin-Error.
htaccess:
Header set Access-Control-Allow-Origin "*"
base href is also set:
<base href="http://XXX.XXX.ch">
Error: CORS-Header 'Access-Control-Allow-Origin' missing
Any idea to solve the problem?
thanks
thomas

Related

Unrecognized Content-Security-Policy directive ''self''

I have an error please let me know how to solve it
[ Unrecognized Content-Security-Policy directive ''self''. ]
[ The Content Security Policy directive 'default-src' contains 'style-src' as a source expression. Did you mean 'default-src ...; style-src...' (note the semicolon)? ]
The code used is
Header set Content-Security-Policy "default-src style-src 'unsafe-inline'; 'self';"

Content Security Policy report-uri is not being recognized

I'm setting up a content security policy in report-only mode. When I test it, Google Chrome gives this error:
The Content Security Policy 'default-src 'self'; script-src 'self' 'unsafe-inline' https: //use.typekit.com https://js.hs-analytics.net https://google-analytics.com https://ajax.googleapis.com; font-src https: //use.typekit.com; style-src 'self' 'unsafe-inline' https: //use.typekit.com; frame-src https: //www.youtube.com;' was delivered in report-only mode, but does not specify a 'report-uri'; the policy will have no effect. Please either add a 'report-uri' directive, or deliver the policy via the 'Content-Security-Policy' header.
Here is my full Content Security Policy, I define the HTTP header in a header PHP file for the website:
header("Content-Security-Policy-Report-Only: default-src 'self';
script-src 'self' 'unsafe-inline' https://use.typekit.com https://js.hs-analytics.net https://google-analytics.com https://ajax.googleapis.com;
font-src https://use.typekit.com;
style-src 'self' 'unsafe-inline' https://use.typekit.com;
frame-src https://www.youtube.com;
report-uri /csp-violations-report-endpoint;
");
I have a folder in the web root directory: csp-violations-report-endpoint, with a single index.php file inside of it to handle the violation.
I'm not sure what I'm doing wrong. I've read MDN's suggestions for report-uri and used Google's example to write my report-uri directive.
Should I try pointing the report-uri to a script in the root directory? Should I try letting it log on its own, or do I need a parser to handle it? Could there be something wrong with my script? (I can include that if it would be of help)
Edit: It may be possible that my web browser is ignoring the report-uri directive (since it's deprecated) and is expecting the report-to directive, and that is why it's not working but the error message leads me to believe that isn't the case.
I might be completely off base, but, if you're using the code exactly as pictured above, then you are likely sending a bunch of invalid headers. HTTP Headers have to exist on a single line, and yours does not. Try this:
header(
"Content-Security-Policy-Report-Only: default-src 'self'; " .
"script-src 'self' 'unsafe-inline' https://use.typekit.com https://js.hs-analytics.net https://google-analytics.com https://ajax.googleapis.com; " .
"font-src https://use.typekit.com; " .
"style-src 'self' 'unsafe-inline' https://use.typekit.com; " .
"frame-src https://www.youtube.com; " .
"report-uri /csp-violations-report-endpoint; "
);

404.17 Error showing after adding a Wildcard '*' Mime type (IIS 7)

I am trying to make extensionless url's (domain.com/urlwithoutextension) to be readable by my web server as an .html or .asp file, and all I'm getting is
HTTP Error 404.17 - Not Found
The requested content appears to be script and will not
be served by the static file handler.
Then below the error it says I can try this:
If you want to serve this content as a static file, add an explicit MIME map.
So I added a MIME map in IIS 7..
Extension: *
MIME Type: application/octet-stream
But I'm still getting this error. All I want to do is make it so domain.com/thisurl to be viewed as a .html file, without the .html extension. Help?
I simply changed it to . instead of * for Extension in MIME Type, and it worked perfectly. Thanks to the comments.

How to proxy an image in node express?

I have this image from Filepicker.io: https://www.filepicker.io/api/file/9H-1AxgZTwqct8tjkmkZ
But when I open it in the browser, it will download the file directly, I thought that's because the response header or something, so I'm wondering how to proxy it so that I can view it in browser like other images, like this one : https://distilleryimage1.s3.amazonaws.com/84d490a4071811e285a622000a1d039f_5.jpg
curl -si https://www.filepicker.io/api/file/9H-1AxgZTwqct8tjkmkZ | head
HTTP/1.1 200 OK
Access-Control-Allow-Headers: CONTENT-TYPE, X-NO-STREAM
Access-Control-Allow-Methods: DELETE, GET, HEAD, POST, PUT
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 21600
Cache-Control: public, max-age=315360000, no-transform
Content-Disposition: attachment; filename="中秋福利.jpg"
Content-Type: image/jpeg
Date: Fri, 28 Sep 2012 08:21:45 GMT
Server: gunicorn/0.14.6
Content-Disposition is set to attachment. If you proxy it then remove that header altogether or set it to inline.
While vinayr's answer is correct, you can avoid using a proxy altogether by appending ?dl=false to the end of your FilePicker URI.
For example: https://www.filepicker.io/api/file/9H-1AxgZTwqct8tjkmkZ?dl=false
There are also a number of other in the FilePicker Documentation, particularly the "Working with FPUrls" section and the "Retrieving the file" and "Image Conversion" subsections.
Github uses https://github.com/atmos/camo to proxy images for SSL. You can try using it. You can mount it on your express app:
var camo = require('./node_modules/server.js') // you have to strip the server.listen(port) part
app.use('/proxy', camo)

Redirecting Sub-directories with Backbone.js and/or htaccess

After many hours of research and tinkering, I've finally managed to get backbone.js routes working, with one exception:
If I enter "/workingdir/routepath" - everything is great and it uses the 'routpath' route, however if I enter "/workingdir/routepath/" or "/workingdir/routepath/asdf" or anything similar, my website breaks and I get errors that look somewhat like this:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.com/staging/personal/css/style.css". fj:5
Resource interpreted as Script but transferred with MIME type text/html: "http://example.com/staging/personal/scripts/jquery-1.7.2.min.js". fj:6
Uncaught SyntaxError: Unexpected token < jquery-1.7.2.min.js:1
Resource interpreted as Script but transferred with MIME type text/html: "http://example.com/staging/personal/scripts/nav.js". fj:6
Resource interpreted as Script but transferred with MIME type text/html: "http://example.com/staging/personal/scripts/underscore-min.js". fj:6
Uncaught SyntaxError: Unexpected token < underscore-min.js:1
Resource interpreted as Script but transferred with MIME type text/html: "http://example.com/staging/personal/scripts/backbone-min.js". fj:6
Uncaught SyntaxError: Unexpected token < backbone-min.js:1
Uncaught SyntaxError: Unexpected token <
And the page has no styling whatsoever. I think the issue is coming from the slash in the URL, making the paths for css and js files point to the wrong location (they should be in "staging/css/" and "staging/scripts/", but as the log indicates, it's looking for "staging/personal/xxx").
Any ideas on how to fix this? Thank you for your time!
Relative path references will be resolved differently depending on whether the request URI has a trailing slash or not. I imagine that's what's causing your problem. Consider these links:
<!-- Relative path references -->
<link href="staging/css/style1.css">
<link href="./staging/css/style2.css">
<!-- Absolute path reference -->
<link href="/workingdir/staging/css/style3.css">
This is how those paths will be resolved depending on the request URI:
REQUEST_URI = /workingdir/routepath
/workingdir/staging/css/style1.css
/workingdir/staging/css/style2.css
/workingdir/staging/css/style3.css
REQUEST_URI = /workingdir/routepath/
/workingdir/routepath/staging/css/style1.css
/workingdir/routepath/staging/css/style2.css
/workingdir/staging/css/style3.css
So if you want the ability to make the request with a trailing slash or additional segments, you'll want to use an absolute path reference.
Just to share with others having this issue. I had the same problem, but now with a different solution. These additions to .htaccess didn't work out initially:
AddType application/x-javascript .js
AddType text/css .css
AddType text/javascript .js
AddType text/css .css
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType application/woff .woff
AddType font/woff .woff
AddType font/opentype .woff
AddType application/x-font-woff .woff
AddType application/vnd.ms-fontobject .eot
AddDefaultCharset UTF-8
Options -Indexes
Finally, I realized that while my path below worked on localhost, the CASE-sensitive server did not accept the path
\js\prettyPhoto\js\jquery.prettyPhoto.js
instead of
\js\prettyphoto\js\jquery.prettyPhoto.js
The CAPITAL p was making all those errors! It might be too, for your case, since you have "Uncaught SyntaxError: Unexpected token < " and "Resource interpreted as Stylesheet but transferred with MIME type text/html:"
Let me know if it help : )

Resources