I have been attempting to port an existing Chrome extension to Firefox.
The extension uses a content script to add an element to a page and proceeds to bootstrap the angular app from that element.
This part works as expected, but individual directives that use templateUrl are blocked. Stepping through the code provides error messages like Access to restricted URI denied and NS_ERROR_DOM_BAD_URI.
In Chrome this problem is solved with the 'web_accessible_resources' whitelist.
This previous question seems to indicate that there is no analogous way to access extension resources in Firefox. This would be rather unfortunate, because, although I can inline all of the relevant templates, the extension also includes a number of images which are programmatically inserted on the page.
Is there any way to get at extension resources in an SDK extension?
If not, is it reasonably easy to do so with a legacy extension (as implied here)?
You can use the self module in the SDK to get a resolvable resource URI for files in the data directory. If you have your angular file in ./data/, you can retrieve it via:
const self = require('sdk/self');
console.log(self.data.url('angular.js'));
// Prints the url of `./data/angular.js`
Related
I'm building a web application that is supposed to take files from wherever in the LAN and display the content of those files. The application also uses a javascript library for generating embed objects to preview the files, if they are pdf.
The problem is that i can not successfully seem to link to those files, be them images, documents or videos.
The url is either formatted by Google Chrome by prefixing it with the address to the local web page, or interprets it as a local file and denies access to load it, or throws a connection time out if i manually prefix the file urls with http://lan-server....
As I said i tried formatting the urls to these files (the ones on the lan machines) in different ways, but none of them work.
Here is an example of an to a file in LAN
http://is-something/Subfolder/test/image.png
This one gives a timeout error
Here is another one
\\is-something/Subfolder/test/image.png
This one is prefixed with the address of the current webpage (http://localhost...)
I also tried using file:// way to access the files but it seems this only works for the local machine
So what i would want is a way to acces the files that i spoke about.
I need to use them in html elements for the src attribute, as well as in the css rules (for background url).
MDN docs state:
To enable a web page to contain an <img> element whose src attribute points to this image,
you could specify "web_accessible_resources" like this:
"web_accessible_resources": ["images/my-image.png"]
The file will then be available using a URL like:
moz-extension://<extension-UUID>/images/my-image.png"
<extension-UUID> is not your extension's ID.
It is randomly generated for every browser instance.
This prevents websites from fingerprinting a browser by examining
the extensions it has installed.
So, I would think that these resources cannot be read by any web page outside the extension, since they would need to know the random UUID.
However, the same MDN docs also state:
Note that if you make a page web-accessible, then any website may then link or redirect
to that page. The page should then treat any input (POST data, for examples)
as if it came from an untrusted source, just as a normal web page should.
I don't understand how "any website may then link or redirect to that page". Wouldn't it need to know the random UUID? How else could a webpage access this resource?
The point of Web Accessible Resources is to be able to include them in a web context.
While you can communicate the random UUID to the webpage so that it can use the file, it doesn't have to be included by the website code itself. Here's a hypothetical scenario:
You're writing an extension that adds a button to evil.com site's UI. That button is supposed to have an image on it.
You bundle the image with your extension, but to add it as src or CSS property to the webpage you need to be able to reference it from a web context.
So, you make it web-accessible, and then inject your UI element with a content script.
Perfectly plausible scenario.
Note that a random third-party site villains-united.com can't just scrape the URL to know if your extension is installed, since the URL is per-browser unique. This is the intent behind WebExtensions's UUID over Chrome's extension-id model.
However, let's continue our hypothetical scenario, from a security perspective.
The operators of evil.com are unhappy with your extra UI. They add a script to their code that looks for added buttons.
That script can see the DOM properties of the button, including the address of the image. Now evil.com's code can see your UUID.
Being the good guy, your extension's source code is available somewhere, including the page that launches nuclear missiles if called (why you would have that and why it would be web-accessible is another matter, perhaps to provide the functionality to good-guys-last-resort.org).
evil.com's script now can reconstruct the URL of this trigger page and XHR it, plunging the planet into nuclear apocalypse. Oops. You probably should've checked the origin of that request.
Basically, if a web-accessible resource is used in a page, the UUID likely leaks to that page's context via DOM. That may not be a page you control.
I have a webbrowser control in my application that is used to display pdf files that have been created in iTextSharp and are stored locally on the hard drive.
I would like to be able to navigate the file (next, previous, first, last, toc) from my application rather than using the inbuilt nav of the reader in the browser.
I have seen that you can navigate to specific pages by using
Browser.Navigate("filename.pdf#page=?);
This works the first time but when trying to navigate to a different page, it makes the browser disappear completely with no errors. However, I can reload the file without problem if I don't have the #page=? suffix on the file url though. Any ideas on this?
Alternatively, is there anyway in iTextSharp of adding something to the file to allow for it to be navigated from an external command?
All the official parameters that can be used to navigate through a PDF using parameters in the query string after the ? character are listed in a document published by Adobe: Parameters for Opening PDF Files
You already mentioned the page parameter. Another option could be using named destinations: nameddest=destination. In this case, you need to add the anchor with name destination to the file using iTextSharp.
Note that not all viewers implement these parameters. Adobe supports them in Adobe Reader and in the Adobe Reader plug-in, but there is no guarantee that they will work in pdf.js (Firefox), Pdfium (Google Chrome),... If your browser disappears when using an open parameter, you may have hit a bug in the browser or the viewer plug-in that causes the browser to crash. iTextSharp nor iText can crash a browser ;-)
There are no other ways you can navigate a PDF from an external application. The only thing you can do, is to add JavaScript to the PDF so that it always opens at the same page. This is done using an open action. I don't think this solves your problem as it would mean that you have to change the PDF file every time you want it to open at a different page.
This thread works well in a mobile app but in a desktop app it would seem I cant add the reference to the external JS in an extjs desktop app.
The instructions from Sencha somehow don't correspond or it doesn't work for me when I try and follow them. So, I am selecting Resources->Library and can see the attribute Include JavaScript (ticked) and Library Base Path:/ext.
The JS file I am using I use in a phone app and its fine - I added it to the app.json in that and compiling the app copies the file over to the target and defers the loading.
In this case with SA I am not seeing the file copied to the target - nor can I follow the instructions with SA 3 that are documented. The only way I can add an external JS is by dropping it onto the filesystem into the ext folder manually. Again, it doesn't appear in the target and certainly errors when I run the app with
Uncaught ReferenceError: hex_sha512 is not defined
This JS has been used in other apps, is proved and tested but just relates to SA or my wrong use of SA.
The proper way to add a resource in Sencha Architect, regardless of framework, is to add it as a JS resource.
This is most easily done by hitting ctrl-t (or cmd-t on a mac) and typing "js resource" (or some shortened string thereof to get autocompletion)...
Alternatively, you can use the toolbox, click "Resources", and drag out or double click "JS Resource"
These are just different user interfaces to accomplish the same task.
Once you've added your JS resource using one of the above methods, you need to set the URL in the config pane (at bottom right unless you've configured Architect to swap the left and right panes)...
The URL is to be set relative to your project folder. If you copy the JS file into your project root under a folder called "lib" for example, then you'd set the url config to "lib/foo.js" - where foo.js is the filename, of course.
Hope that helps!
My lack of understanding of the instructions or they are not clear:
It would seem the way to do it is take eyes up to the top right of SA and spot the + button as shown in the image.
Add the JS resource and scroll up because it may be hidden behind the property inspector.
On setting the url field under properties, the source of the JS appears in the main editing window.
Certainly works fine after the app is built.
The only way I know to take the contents of a local file and push those bytes to a server is to set up a form post with an <input> of appropriate type to prompt the user to select a file.
I would like to do the same thing only pushing the data through XMLHttpRequest (no cross-scripting tricks).
Currently, we do this with an iframe to get the post behavior.
My sense is the iframe is the only solution, but I post here in case I've missed something.
You could use the JavaScript File API (available in Firefox 3.6 or later and latest versions of Chrome and Safari). Basically, you can add an event listener to the <input> tag that will fire when a user selects a file. Then, you can upload it using an XMLHttpRequest. Also, the File API can allow you to do other fancy stuff, such as drag-and-drop uploads, getting information about a file before it is sent to the server, and providing a progress bar as a file is uploading.More info: https://developer.mozilla.org/en/using_files_from_web_applications
This is not a good cross-browser solution because it doesn't have good support in all the popular browsers (Internet Explorer), but you could use feature detection in JavaScript to detect if the File API is available and revert back to your iframe method if it is not.