I've created a simple web email client.
I want to "block" (i.e. not show) images whose protocol is http (vs https) because my site is served over ssl and I don't want insecure content warnings.
What's the best way to go about this? Should I traverse the email dom and set the image href to "" (ie. empty string)?
Is there a better way?
I should note that this is a temporary measure. In the future I will set up an image proxy/cache system similar to gmail's.
I've looked at the way it's done in Outlook, gmail, yahoo, etc. Basically they just use a placeholder image (hosted on some cdn) that's just a small grey box, and they let the size attributes of the img tag scale it to the right size.
So all they do is change the url of the img tag to be the url of the grey box.
A smart variation if you want to eventually show the correct image (enable images) is to store the url of the real image location as part of a query string that can be parsed and used later to get the real image:
http://mycdn.com/placeholderimage.jpg?http://realcdn.com/therealimage.jpg
Related
I have seen many Q/A on StackOverflow on how to get the data URI from an image tag (as "Copy the image as Data URI" in the contextual panel in Chrome) but every single answer contains XHR or using a canvas (assuming you have the control on the image from the beginning).
I want to get the data URI from the image without reloading again the URL (to avoid CORS error).
Ultimately, my goal is to format the image to an array of RGB pixels, so I can use it like that. Then I would be able to apply some transformations or processes like "if the image is more than 90% red, don't show it" by using a "homemade" browser extension.
If you have any idea on how I could get this, I'll be really grateful.
In short , I'm developing a google chrome extension , when I add any url starting with http:// to source attribute to an iframe, I get a message like :
[blocked] The page at 'https://www.facebook.com/' was loaded over
HTTPS, but ran insecure content from 'http://youtu.be/m0QxDjRdIq4':
this content should also be loaded over HTTPS.
and I don't see the content in the iframe !
so how can I overcome this ?
what I want to achieve is that : I hide facebook adds , and in its place I added an iframe instead, I detect when the mouse is hovering over a link contained in a post, then I want to show the link's content in an iframe.
What are my possible alternatives? I don't need to enable showing insecure content in chrome because it is a chrome extension that I will publish!
It seems that the security limit is strict, so we need a way to work around that.
What if you could load the page using other means than an <iframe> and insert it into the page afterwards? There are multiple ways to do that, ranging from more practical to less realistic.
You can use the Chrome captureVisibleTab API to generate a screenshot of a website as an image, exactly what you need. It sounds like you need a visible tab to use this API, but you can actually specify any Chrome window as a target and you can create Chrome windows unfocused and hidden behind the edge of the screen.
If captureVisibleTab provides trouble in step 2, there is also pageCapture API to get an entire page as a single content object.
You can also use a server to create screenshots. Serve a simple application over HTTPS that uses PhantomJS to create a screenshot. An advantage of this approach is your server is likely to be much faster at screenshot generation. The disadvantage is you need to pay for the server.
You could also use xhr in your extension background process (which is not limited by the security limitation) to get the HTML. This wouldn't get any resources, but that could be a beneficial thing if you want a very quick if inaccurate screenshot. Just load HTML, parse and detect links to stylesheets, download them and inject those stylesheets into the HTML as <style> tags.
The resulting HTML can be injected to the <iframe> manually. You could even inject scripts and images this way, but that would be harder and less useful, since you need a quick screenshot of how the page looks like.
I think using built-in Chrome functionality for screenshots is the best bet, if only you can make the user experience good enough.
First and stupid way: change http in link on https. But youtube and I think many other sites don't allow to show their content in iframes. try it and you get Refused to display 'link' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Second and at least stupid way: remove protocol from link, like //youtu.be/m0QxDjRdIq4 and you get protocol, that on this page. But a situation similar to the previous.
Third way for youtube only: you can generate iframe with src like //www.youtube.com/embed/m0QxDjRdIq4 and user can see the video.
Fourth way, not for all sites: use site API's - not a best solution, but like a option.
Fifth way, but impossible (I think): try to get page's content with javascript and regenerate it in way, that you need.
Sixth way, needs powerfull server: create an service on your server, which will download pages and resend it to users. One problem - linear dependence server's power of requests.
Seventh way, I forgot that it's extension: you can open link in another tab/window, get it content, close tab/window and show content in tab that you need.
Eigth way, the best, I think: use YAHOO yql like this:
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select"
+"* from html where url='youtube.com/watch?v=m0QxDjRdIq4'"
+"&format=json&diagnostics=true&callback=?"
, function (data, textStatus, jqxhr) {
// process data
}
}
Demo on jsFiddle
I'm wondering is there a JavaScript library available that would allow me to generate an Image from the contents of a DIV.
Basically this is required for some Server-Side Printing code, which needs to print a background from the Browser.
What I'd ultimately like to do would be encode the DIV contents into PNG format and post up the encoded data with the print operation.
Any ideas if this is possible ?
[EDIT] What I have is a mapping application where background data is coming from an image server straight into a browser DIV (Think Google Maps). That div is background to me main data. When Print is pressed the server generates a PDF from the data it knows about, but knows nothing about the browser's background data. What I'd really like is to be able to provide the server with the browsers background image in some way!
Cheers,
Ro
Maybe it's possible with the Canvas:
MDN - Drawing Graphics with Canvas
You can create an image tag from JavaScript but not the actual image in it: JS has no commands to allocate memory for the bitmap and it has no commands to render anything on it.
The usual solution is to have a report generator on the server which creates the image on request. Look at BIRT or JasperReports.
[EDIT] Based on your comment, the solution is simple: Examine the DIV, find the URL for the background image and replace the DIV with an IMG element. Put the URL into the SRC attribute and then print.
Very interesting question.
Actually I solve this problem using ajax (transfer images' positions to the server, server creates one image from pieces, save it and send url to the client). I don't very like this solution but I don't know other yet.
I really don't think this is possible on the browser, certainly not without some kind of plugin.
Could you send some coordinate info or something to the web server and that way have the web server request the same map image from the image server?
Generating images was only possible in IE5 :( Then due to security reasons it was dropped. I'm still missing it.
I think I've worked out a way to do it.
1) When the user presses Print, interrogate the DIV
2) Images on that DIV are being generated by the OpenLayers API
3) Grab the URL of each Image
4) Grab the location on screen of each image
5) Translate the screen location into a Real-World location (I have API for this)
6) As part of the print send up all the image URL's along with their real-world extents
7) Allow the server to re-request the Images and draw them into their appropriate locations.
Does it have to be done on the browser side? I have seen where you can do a server side call and the MIME type on the server response is the image type. I think the example I'm thinking of was for b64 encoded jpegs in a db, but the process should be the same. The response would be the data that is currently in your DIV. Sorry if I'm way off base.
so you select an image via the file input, the selected image file gets gets turned into a window.url.createobjecturl and passed to a hidden "img" element unmodified, then a preview of the image element's current data is rendered into a canvas element. so far, so good. but then when i try to render the canvas.toDataURL i keep getting that aggravating security exception about it being insecure. this happens on chrome and firefox.
understand that this is a file OBJECT that was select with an html INPUT element, and NOT via a "file://" url, and the webpage is an actual webpage, and is loaded via "http://" and not via "file://".
the image file has not even left the browser yet to go to the server, so there should not be any domain issues. it's just a raw blob being asserted as the source to an image, which is then telling the canvas to update its preview, which it does. after that, when trying to saved the canvas contents, the browser triggers an error.
i have read all of the specs regarding scenarious where the canvas element becomes tainted, and this scenario does not meet ANY of those scenarios.
i've seen a similar example on mozilla demos of some one offering code snippets to show people how to do the same thing, but i have not seen if any one had problems with it.
any ideas? TIA
#
=== UPDATE ===
#
okay, i've figured out what the PROBLEM is, but i'm still not clear on WHY it's a problem. here's the setup:
1) page is called via, eg, "example.com/"
2) script is called via: "r.example.com/script.js"
3) if script loads ANY image from "r.example.com", to use for the PAGE DESIGN, and NOT the canvas, it some how taints the entire page. in this case i draw the entire page via javascript, so the header image is tainting the rest of the page. if i change the header image to come from "example.com" instead of "r.example.com", the problem with the canvas complaining about not being secure goes away, and everything is fine.
what i don't understand is WHY this is happening. the header image is being loaded from the same place as the javascript file, and, for the sake of argument i even set the access-control-allow-origin to "*", for both the main domain and the subdomain, which makes no difference.
so, access control is allowed from anywhere, the header image is coming from the same place as the javascript file, and it is NOT being drawn to the canvas (that's a user file), so why would drawing the header image via javascript taint a canvas that it has nothing to do with??? also, the css and other media are loaded from the same subdomain, but this does not affect the page, so long as the script did not load them [o_0].
i want to keep all of my resources on a separate subdomain for scalability, so, this issue is frustrating, because i don't quite understand why it's still happening...
If you want your image to be on a separate subdomain, you have to change the origin of the image to allow all subdomains like this:
img .origin = '*.mydomain.com'
I'm using canvas with kineticJS and just tested it myself.
it appears that you have to set this property on the image object itself, as it has no domain initially [o_0]
img.origin = 'mydomain.com'
I'm looking for a way to check whether a specific image has been loaded on a webpage with Selenium IDE.
My first try was to generate a hash value of the image but this doesn't seem to be possible with javascript. I then found out that you can base64 encode an image if you load it into a canvas and then call toDataUrl(). However this doesn't work if the image is located on another domain.
My image server provides a standard "image not found"-image. I want to check if a specific image was successfully loaded by comparing the loaded image against the failure image. Do you have any ideas how this can be achieved?
Have you looked at 'selenium signature' as a plug in to the ide? https://addons.mozilla.org/en-US/firefox/addon/selenium-ide-signature/
It will make a crc32 signature of the element like *html=50D5FBD3*css=5BBF6784*img=81AD9F9D*
You'll only need the *img=81AD9F9D* portion to validate an image.