I use this site for web font. (This is a web font provider like google fonts)
I need protect my css and js file like this site.
when you see below html file this css load complete and page show correctly but you don't access css files.
What method this site uses for securing css files??
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>B Koodak test</title>
<link href='http://www.font-api.ir/css/B Koodak={font-api.ir}.css' rel='stylesheet'
type='text/css'>
<style>
.myclass{
font-family:B Koodak,'B Koodak',tahoma;
font-size:12px;
}
</style>
</head>
<body>
<div class="myclass">This Is Test Text.</div>
</body>
</html>
for example if use access this link:
http://www.font-api.ir/css/B Koodak={font-api.ir}.css
this content is in base64 in above file: (thanks #Barmar and #Cracker0dks)
Rk9OVC1BUEkuaXI6DQpTYWxhbSENCnNoYXlhZCBsYXplbSBiYXNoYWQgYmVkYW5pZCBrZSBjb3B5
IGthcmRhbiBrYXJlIGtob29iaSBuaXN0IQ0KbG90ZmFuIGZvbnRlIG1vcmVkZSBuYXphcmUga2hv
ZCByYSBheiBmb250LWFwaS5pciBlbnRla2hhYiBrb25pZC4NCg==
This is decoded content. This is a message that say please no copy my css file (in persian language):
FONT-API.ir:
Salam!
shayad lazem bashad bedanid ke copy kardan kare khoobi nist!
lotfan fonte morede nazare khod ra az font-api.ir entekhab konid.
This is my chrome developer tools image:
Network tab, Request header and response:
The site that you pointed out is using the HTTP "Referrer" header to protect its css files. However, it is very simple bypass this protection (e.g. by faking the http header or sniffing browser traffic). If you insist on applying the same kind of check on your side you have to do it through a configuration on your web server.
If you are using Apache web server you can do it via .htaccess:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteRule \.(css)$ - [NC,F,L]
Here is an online tool you can use to generate your htaccess for css files:
http://www.htaccesstools.com/hotlink-protection/
Ideally...it is not possible to protect images, css js or anything because when the browser loads a website, then it has to load all these elements too.....and if the browser is able to load it then any one can see/download the assets of the site.
Only possible things is to fake the stuffs for world using .htaccess write.
As for the site you referenced, the are using http.setRequestHeader to simply fool you....nothing is concrete...if you want to still access their stuffs, just do a little bit of googling and you'll yourself understand the difference!! :)
their css files are accessible. I know of no way to 'protect' since the browser downloads it.
follow these steps to view all css files:
1.in chrome, open dev tools (f12)
2.click cntr+o
enter '.css'
you now see all css files
EDIT in response to comment:
you are referring to just one part of the css: the #font-face import. by not usable, you mean that when you try to import this font, its not accessible? if so, they may be restricting responses to http requests to the url of the font: http://www.font-api.ir/fontsdir/35.eot?#'
the server at http://www.font-api.ir can filter its responses based on what domain is requesting the resource.
They Using .htaccess file to hide or secure file / directory. HTACCESS is a powerful file that can manipulate user control even access right.
Related
i tried to use fetch on localhost, but it didn't work.
here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
fetch("hi.txt").then(function(response){
response.text().then(function(text){
alert(text)
})
})
</script>
</body>
</html>
hi.txt file is in same folder with the script file.
below error is shown in console:
index.html:12 Fetch API cannot load file:///C:/~~~~/hi.txt. URL scheme "file" is not supported.
(~~~) is path
Since your URL is relative (it's just "hi.txt"), it's resolved against the URL of the page the code is running in. In your case, that appears to be file:///something — that is, a file you've loaded directly from your file system, not by requesting it from a server. Chrome doesn't allow fetching from the file scheme. The file scheme's origin is null. The Chrome team's interpretation of the Same Origin Policy is that no origin, not even itself, should match null. (A reasonable interpretation in my view, but opinions can vary.)
When doing web development, you want to be working through a server process because pages loaded directly from the file system behave differently in several sometimes-subtle ways vs. pages loaded from servers.
There are a couple of ways to do that:
Use the features of your IDE, if you use one, and/or extensions to it. For instance, for VSCode there's the "live server" extension which makes it very easy to run your code from a minimal server.
Use an actual web server process running locally. There are simple ones that are easy to install.
Use one of various "quick start" scaffolding tools that set up simple projects for you, often via npm (and Node.js), with a command you can use to build and run the project locally in development mode.
hi you are running your file like this way
-you are right clicking on your html file-opening with it browser. This way you are telling to browser to open your html file from your file location where you have saved it.Check in Your browser url bar you will get something like this C:/xampp/htdocs/xyz.html so this is your local directory file system. so now you have to first start your sever such as xampp or whatever server you have installed and then you type this localhost/filename or /subfolder name and / file name if you have stored it in subfolder...and hit enter.inshort you have to query to a server like you does in php file calling.....
You can just create a local web server (XAMPP) and upload there your hi.txt file. If you did that, replace
fetch("hi.txt")
with
fetch("http://127.0.0.1/hi.txt")
I have an iOS Cordova/Phonegap project which loads html pages from the internet. This works if I upload cordova.js and all the plugins then include cordova.js in the html page. However, since the files are already in the app, it seems a waste to make people download them all. I'm trying to include the local files in the remote html, but it doesn't seem to load. How can I do this?
I have a local script test.js in www
alert("test");
I'm getting the path to it with
[[NSBundle mainBundle] pathForResource:#"test" ofType:#"js" inDirectory:#"www"];
It looks something like
/var/containers/Bundle/Application/E31EA51E-7ED0-4D30-90FC-57ACBF3B3DA5/MyApp.app/www/test.js
I include the file in the remote html
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' gap://ready file: data:">
<script src="file:///var/containers/Bundle/Application/E31EA51E-7ED0-4D30-90FC-57ACBF3B3DA5/MyApp.app/www/test.js" type="text/javascript"></script>
However, the script never loads.
Edit: I added "Access-Control-Allow-Origin: *" header to the http page, but it still doesn't work.
Facing the same problem, I think using "WKURLSchemeHandler" to intercept ur request in iOS 11 will solve it.
if you are using UIWebView, it's quite easy to go with a NSURLProtocol subclass which can intercept all of your network request and do your own job(in your case, accept the http://*/test.js and return the file content as the response).
However, if you are using the WKWebView, the NSURLProtocol would not work, and the latest WKURLSchemeHandler can't intercept the http/https requests either.probably set up an embedded http server is the way to go.
This can be done using a PR to the file plugin which solves the mixed content problem on ios: apache/cordova-plugin-file#296 The fixed version is available at: https://github.com/guylando/cordova-plugin-file
If you load a remote site https://example.com on the webview then it allows to access local files using the url: https://example.com/cdvfile/bundle/www/cordova.js instead of cdvfile://localhost/bundle/www/cordova.js And by this solves the mixed content problems
I have a very strange issues in production servers. In VbScript application in pages i've linked it to js or css resources. Somehow part of the url, for download js or css resource, connect with some other part of code on the page or in included pages (this is seen in logs already). Other part can be js, css or html code.
For example: full path to resourse
../mydomain/admin/somefolder/css/la-core-main.css
Instead this in logs i see error (System.Web.HttpException (0x80004005): A potentially dangerous Request.Path value...) with next URL:
../mydomain/admin/somefolder/css/lead>
Without a code example it's hard to nail down your problem. On your activation of the download links target _blank instead so it does not try to navigate the user to the file directly.
Download
EDIT: to better address OP's question.
Includes for CSS and javascript only fail due to improperly linked paths. It is possible that you are trying to link the css and js files from the server end of the folder structure and not the client end of the folder structure. Trying to link the css and js files from the server end, you would use the Scripting.FileSystemObject to read in the files and populate them as part of the page. You would NOT use <link rel""...> or <script src=""...> to connect the scripts in the vbscript/asp code.
If you are trying to connect the scripts to the website on the client end, you need to verify the paths of the js and css documents from the website directly. Open the webpage from your browser and build off of the direct path from the website. So that way it specifically matches the containing folders in the website.
Examples:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Final note: Also verify that your js and css documents are in your hosting web application folders so that you can actually get to them via website.
I load any web page. Then open firebug console and run the below javascript, which creates a link element in the head of the page. the code is below.
var s = document.createElement('link');
s.setAttribute('href', 'file:///home/simha/.public_html/new1.css');
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(s);
alert('Stylesheet injected!');
the content of the file:///home/simha/.public_html/new1.css
body { background-color: #0000ee !important; }
I run the code in the firebug console and the following appears in the head of the html
<link type="text/css" rel="stylesheet" href="file:///home/simha/.public_html/new1.css">
But there no change in the background color (change to blue) of the body.
I checked the css rule independently from editing the css in firebug, the background color changes to blue.
I have apache web server installed. So i also tried instead of "file:///home/simha/.public_html/new1.css" to "localhost/~simha/new1.css" still it does not work.
I am using firefox browser.
That's because for security reasons external resources can be loaded from a local URI scheme (like file:) only if the document has been loaded from a local URI too.
Try this,
s.setAttribute('href', 'new1.css');
Your stylesheet named new1.css needs to be referenced in relation to the server's document root.
So you're using Apache, which means you setup the apache2.conf (or httpd.conf, etc) as well as the site conf file(s). The path you used in this config for DocumentRoot will be the reference point. From there you simply put /path/to/new1.css.
So in your case,
file:///home/simha/.public_html/new1.css
will translate to
/new1.css
So your final code will be
<link type="text/css" rel="stylesheet" href="/new1.css">
When you put file:/// prefixing an address, it's not using the server filesystem to load the file, it's using the client/user. This is due to the blank string where the hostname should be - file://_BLANKHOSTNAME_/. Here's more info if you're curious.
For your localhost/new1.css to work, it needs to be prefixed with http:// like this:
href="http://localhost/new1.css"
Otherwise it's interpreting localhost as if it were a directory name and not the hostname.
I think the problem is with file: or localhost in firefox, I saved the file in dropbox and used that link it worked.
var s = document.createElement('link');
s.setAttribute('href', 'https://dl-web.dropbox.com/get/new1.css?w=AACLoomOT900PfGVqEuu9rHP4NlewdOq0KaSZbhzmgyG1A&dl=1');
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(s);
alert('Stylesheet injected!');
But is there any setting in the linux for apache and file to make it work locally.
One possible problem might be the path you have
file:///home/simha/.public_html/new1.css
When you allow per user directories in Apache, it is usually public_html without a leading dot. So, when you rename the directory to /home/simha/public_html, http://localhost/~simha/new1.css should work as expected.
Your code works as is, at least when you use an absolute URL
<button type="button" class="btn btn-info">Info</button>
In the Javascript, I replaced your CSS with the publicly accessible Bootstrap CSS
s.setAttribute('href', 'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
everything else is left as is, see JSFiddle
As you can see, the button is coloured like the Info button in the docs at Bootstrap - Buttons.
If you did not solve this problem yet,
Serve all static content from a (http) server of your choice. Do not use file system paths. Firefox wont load them ( in a web page context )
Try to put all the static resources along with your
html, and serve them with relative url.
Now try this thing. open view source, and check if the css path is clickable and is fetching the content according to your expectation. If not, directly access that file from address bar of the browser. (Make sure your localhost is running and you have put all your files related to this in the web server - I normally use /var/www/). Use the path that works like this in your html too. (no file:// protocol, remember).
If you are not success by these, WWJD.
Also tell us when you are successful.
I had an idea on how to vastly speed up my website and ease the load on my server for cached objects, but I'm wondering if this is an extremely stupid idea before I spend all day thinking about it! Hear me out -
The localStorage object has a minimum of 2.5 MB (in Chrome, more here) which is good enough for most small sites. Which is why I am wondering - for small, static websites, would it be a good idea to basically save the entire site in a huge localStorage file and basically load the site from the visitor's own computer each time? To better explain my idea, here's some pseudo-code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--other head information-->
</head>
<body>
<script>
if (localStorage.getItem('cached_site')!=null) {
document.getElementsByTagName("body")[0].remove();
document.documentElement.innerHTML = localStorage.getItem('cached_site');
//Somehow stop loading the rest of the site (ajax?)
}
else {
//set localStorage var to the source code of the site.
//**This will be fleshed out to data/base64 all image resources as well**
localStorage.setItem('cached_site',document.documentElement.innerHTML);
//load the site as normal
}
</script>
</body>
</html>
This will save the contents of the body in a localStorage file called cached_site. There are some issues with the logic (like the "stop loading the site" part) but you get the idea.
Is this worth it? Potentially, requests could be completely cut from static content because it's all being loaded onto the user's computer. In order to update the content, maybe another value, perhaps a version number could be saved and checked in the else block.
My webhost limits the amount of requests I can get per day, which is why I thought of this. It's not a huge deal, but an interesting project nonetheless.
This idea will have issues with dynamic web sites... how will you treat dynamically generated web pages?
Another idea would be to save each page into a static html file on the server, and then serve the static page, which will be regenerated when needed.
You should also cache the static parts of your website, i.e. images, scripts, CSS, and store these in the cache of your visitors' browsers.
In Apache, you could use mod_expires, and then set up an .htaccess file like this:
### turn on the Expires engine
ExpiresActive On
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)(\.gz)?$">
ExpiresDefault "access plus 1 month"
FileETag None
</FilesMatch>
This will basically cache all of the static parts of your website in your visitors' browser cache, so they will stop refetching the same files over and over.
You should also try and combine your CSS/Javascript files, and ideally end up with 1-2 javascript files, and 1 CSS file, thus limiting the number of requests per client.
I would also suggest using Yahoo's YSlow and Google's PageSpeed Tools to profile your site. They both contain best practices on how to speed up your page here and here.
Here are some suggestions from Yahoo + Google, at a glance:
Minimize HTTP Requests (use combined files for JS/CSS, CSS sprites, image maps and inline images, where possible)
Add an Expires or a Cache-Control Header (like what has been explained above)
Properly configure ETags, or remove them
Gzip Components (e.g. with mod_deflate in Apache)
Make JavaScript and CSS External
Minify JavaScript and CSS (i.e. remove whitespace and newlines) - in PHP, you can use the minify script to do this
Optimize images