I know how to get the localStorage from any open wep page by using content scripts. So I'm basically able to open a new tab with my own web page and read the storage data with a content script and message it to the background page.
But now I'd like to do this without loading an external page every time. Is there a way to access the localStorage of a page directly from within the extension? Maybe some query to chrome directly.
I don't see any API for that.
Your options are:
Make a native messaging host application that would read database files directly from Local Storage directory in the browser user profile. An example: What's the best way to read Sqlite3 directly in Browser using Javascript?
Put the other page into an iframe: Is it possible to use HTML5 local storage to share data between pages from different sites?
P.S. "Ironic side note" quoted from Cross-domain localStorage article by Nicholas C. Zakas.
Who knew cross-domain client-side data storage would be useful? Actually, the WHAT-WG did. In the first draft of the Web Storage specification (at that time, part of HTML5), there was an object called globalStorage that allowed you to specify which domains could access certain data. [...]
The globalStorage interface was implemented in Firefox 2 prematurely as the specification was still evolving. Due to security concerns, globalStorage was removed from the spec and replaced with the origin-specific localStorage.
Related
I'm a newbie when it comes to javascript, but since I have a local intranet web app at work, which I would like to programmatically retrieve a file from by programming another website on the internet, I was wondering if it was at all possible to make client-side (browser) javascript request another website (on the local intranet) and click a button and retrieve a file ? (the next step is to parse this excel file to json in the browser but that's a separate problem).
I have looked at artoo.js on github but am unsure if this is up to the task of clicking a jquery loaded button on that site in question, and retrieve a file.
The local intranet app lacks an API.
You can't. Javascript cannot access (private) local file without an explicit file upload made by the user. For public files (i.e. files on a web server) make sure to check if Cross Origin is set up correctly
You can't, unless Cross Origin Resource Sharing is enabled for those files.
Update :
This can be done using Chrome+Pupeeteer+Nodejs..
Read This post this gives a Full Tutorial How to scrap data from a webpage automatically and more..https://codeburst.io/a-guide-to-automating-scraping-the-web-with-javascript-chrome-puppeteer-node-js-b18efb9e9921.
..
make client-side (browser) javascript request another website (on the local intranet) ...
this can be achieved without cross-Origin Resource Sharing If both website are on same server..as in your case LOCALHOST.
click a button and retrieve a file?
For this, you need a js runtime for executing another website client-side. then you can apply js scripting on the page and manipulate the Dom or fire an event like a button click.
But this is very complex to do So alternatively directly access the file or make a common API endpoint for both the websites.
This is not a question if a web application can be safe/secure to use !!
But if I have a session or encryption key and like to hide it as good as possible on the client side with javascript - what is the best approach?
I wanted to use sessionStorage until I found out that any extension can read this from the content script at least in Chrome. In my view this is a big mistake from the developers as they hide the web pages javascript from the extension but allow it to see web-storage. Everywhere it is stated that the extension can only see the DOM but I do not think most people think that this also include web-storage!
So how can I secure a session key so it is away from reach of an extension? Unable to encrypt it as I then just need to hide the key. The problem is that the session have to be valid for all pages of the site so I can not just keep it in javascript as it is refreshed on each page load.
A cookie is in my view just as bad!
NB: Do not know if this is also a problem for other browsers
An extension, given permission to access your page, can do anything.
A code injected as a <script> tag from a content script into the DOM will execute regardless of your CSP in the context of your page, will full access to your JS context.
That is not to even to mention chrome.debugger API.
So no, you cannot secure your client-side data from extensions that user consented to run on your page, just as you can't secure your data from the browser itself.
This is Two questions:
1/ How can I read the cache stored by the browser if there's no permission restrictions?
2/ If the user browse into a website, is there a posibility of storing the page source code [HTML] in cache? (big website like youtube ..etc)
Thanks.
There is no way to read the cache manually - it all happens behind the scenes, if there is cache.
Yes, you can store the website's source code to the browser cache, but only the client-side part - HTML/CSS/JS/images/fonts/etc. It's called HTML5 Application Cache and it consists in a simple manifest file, which instructs the browser to download certain files locally and next time load them instead of downloading again. This cache you can programmatically update. Keep in mind, though, that most browsers have a limit (usually 5MB) of how much data you can store.
Hope that helps.
I am creating a HTML page where I need to display the names of the files present in the specific local folder, example - C:\Users\User1\Documents\folder1 . I tried to write the code in java script but have not succeeded yet. Most of the question threads mention about "ActiveXObject" to be used but that itself does not work for me.
Reference: JavaScript: Read files in folder
Can anyone help me in achieving this?
In general, you can't do that. Web pages do not have access to the local filesystem.
Chrome can access the contents of a directory that is selected using a file input field. However, other browsers, such as Internet Explorer and Firefox, have not implemented this feature at this time, nor is there currently any way to access a directory that was not selected by the user.
In theory, it is possible to read arbitrary files using a signed Java (not Javascript) applet. However, this requires the user to approve a series of extremely scary warning dialogs — and requires Java! — so it's really not a viable solution.
I'm afraid I may be the bearer of bad news for your design: The action you are requesting expressly violates the security model as specified in the File API spec. The client implementation of FileReader() must make sure that "all files that are being read by FileReader objects have first been selected by the user." (W3C File API , 13. Security Considerations: http://www.w3.org/TR/FileAPI/#security-discussion).
It would be a huge security risk of browser scripts could just arbitrarily open and read any file from a path without any user interaction. No browser manufacturer would allow unfettered access to the entire file system like that.
Thinking about it however, if it is all being run locally, you could use ajax to query a server side script that could return the directory you request.
I am new to both JavaScript and Chrome development, and am trying to create an extension that injects content/CSS in certain web pages. Simple enough, but the catch is that to do so it requires looking through a significant amount of data in local storage. From what I've read so far, the correct way to do this would be either:
Reading the required data (JSON serialized) from storage directly from the content script every time the page is visited, or
Maintaining the state in the extension background page and transferring the required data (also JSON serialized) to the content script environment using message passing.
Either of these approaches, however, would be extremely inefficient due to large amounts of data being needlessly serialized and deserialized on every page load.
So, I want to know:
Is it in any way possible to maintain a shared memory cache in Chrome that content scripts injected in all tabs can access?
If not, is an alternate approach possible where the background page listens for the chrome.tabs.onUpdated event and somehow modifies the target DOM itself?
1) I don't think this is possible. You seem to have exhausted the possibilities.
2) Content scripts are the only way to access/modify a normal tab's DOM.
1- Reading the required data (JSON serialized) from storage directly from the content script every time the page is visited.
But you have to do that every time your page is loaded which you want to avoid (I guess)
2- Maintaining the state in the extension background page and transferring the required data (also JSON serialized) to the content script environment using message passing.
The only way to make Content Scripts and Background scripts interact is via Message Passing. You are not actually looking to an alternative solution but you want to improve the process and avoid message passing each time a page is loaded.
For this, you can develop a spec. The spec states for which URLs or which Domains or based on some condition you want to get the data from Background. If your current URL/Tab agrees with spec only then pass a message to background.
Optionally, Background can also do the same and send message only if your spec is followed. Moreover, when your extension is loaded, you can also cache the storage into local variable.
Use Chrome Storage API to listen for changes in storage and update your local data copy accordingly.
You can also look at this code written by me using the same approach.