I'm working on a image editor/uploader based around Pixastic where I grab image data out of an <input> tag, put it into a canvas, and after manipulating it, encode the data in base 64 and post it to my app with javascript, where it will be saved as a new image file. If it were a standard file upload, I would give the file a new (safe) name, test to make sure it was really an image file and copy it to strip any potentially malicious/personal EXIF data before making it available to users.
My question is - do those security measures make sense in the canvas situation, or are they pointless? Additionally, are there any security issues with my approach that I'm overlooking?
Fyi: the serverside decoding/etc will be done with php.
Thanks.
Some of what you have asked (Not sure if all) are discussed by Shiflett Here
Check it and comment what you think of it!
Related
I am looking for ways to present a PDF file in the browser but make it not downloadable or printable.
If someone really goes through all the trouble to disable the JavaScript library or anything like that, that is fine. This is more for the reason that the content within the PDF will be updated regularly so if you download it it will be out of date by the next day.
I also cannot rely on marking the pdf as protected or encryption as a reasonable way to accomplish this.
If you have any library recommendations or anything else it would be appreciated. I am currently exploring if it is feasible using PDF.js and ViewerJS
I was able to find a solution using ViewerJS and this CSS. The CSS shows a blank page when you try to print (ViewerJS already distorts it to a non-printable state) and ViewerJS prevents you from downloading as a PDF file and instead tries to save as an HTML file.
This meets the requirements of making it just inconvenient enough to discourage users from trying to download the file since the file is always easily accessible on almost any page of the site.
https://gist.github.com/ActuallyConnor/2a80403c7827dd1f78077fb2b5b7e785
I need to generate a PDF from the current screen in my webapp. Some kind of screenshot, but I'm facing serious difficulties.
The main problem is that the view contains a grid made with jQuery Gridster; and some "widgets" contain complex elements like tables, highcharts, etc.
So plugins like jsPDF or html2canvas can't render my page in a prorper PDF. They always generate it blank.
This is how the page looks like. You can/move resize each element:
(Sorry for the CIA style, but there's business data in there)
Some ideas I came across but don't work are:
Using browser print-to-pdf feature programatically. (can't)
Use phantomjs. (but page state matters, so...)
I believe a solution to this poroblem may be widely adopted by anyone trying to generate a PDF of img from current screen in a web app. Quite an unresolved problem.
It's ok if only works on Google Chrome.
Many thanks.
EDIT:
One posible solution might be to find a way to represent the current layout status with an object and save it with and id.
Then retrieve that object via url param with the id and apply the stored layout to the inital page.
This way I might able to take a screenshot with phatomjs, but it seems quite complex to me. Any alternative?
Based on the fact that you're struggling with capturing dynamic content, I think at this point you need to take a step back and see that you might need to alter your approach. The reason these plugins are failing is because they will only work with the HTML before interactions right?
Why not convert the HTML to .pdf format from the server side? But the key part here is, send the current HTML back. By sending it back, you're sending updated static HTML back to the server to be rendered into a PDF? I've used HTML to PDF from server side before and it works fine, so I can't see why it wouldn't be appropriate here.
See this answer for details about HTML to PDF server side.
I want to display user uploaded SVG images on a website, but they're quite open to exploits:
https://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload
https://security.stackexchange.com/questions/36447/img-tag-vulnerability
For example, arbitrary javascript can be embedded in SVG. There's also issues with performance exploits, but I'd consider those lower priority.
Is there any mechanism to make SVG somewhat safe and only use it as an image? Can I simply trust <img src="/media/user-uploaded-image.svg" />?
Wikipedia/Wikimedia Commons hosts SVG files. Does anyone know what measures they take to prevent SVG exploits?
Wikipedia/Wikimedia Commons hosts SVG files. Does anyone know what measures they take to prevent SVG exploits?
They serve the uploaded files from a separate hostname, specifically upload.wikimedia.org. You can cross-site-script into there all you like but it doesn't get you anything: it lives in a different origin to en.wikipedia.org and can't touch its cookies or interact with its script.
This is ultimately the only airtight way to handle file uploads, and what most of the big players do. It is just too difficult to do a thorough scan for all the many obscure XSS possibilities that exist when you allow arbitrary files.
Can I simply trust <img src="/media/user-uploaded-image.svg" />?
It doesn't really matter what <img> does—the user can simply be navigated directly to the SVG address and it'll execute script full-page in the site's origin.
If you embed SVGs as an <image> it shouldn't be able to execute scripts.
See here: https://www.w3.org/wiki/SVG_Security
Of course you can also parse the document before processing and apply the same filters and regex you would apply to an html file.
Also note that (as I understand it) there is a vector of attack in the form of SVGs' ability to request arbitrary external images.
I am writing a Firefox extension and would like the users to be able to change an image on a web page with a local image. Is it possible, using JavaScript, to change the image source with an image that is saved on the user's local machine?
Let me know if you need more information. Thanks
You can set SRC of an image to a "file://" URI obviously, or any string for that matter. But getting the path may prove more tricky - you'll have to use browser's internals to grab the path.
Of course this is completely impossible from a webpage javascript, but an extension is in a much weaker sandbox than a page, and you can do quite a bit about the filesystem, so answers that suggest it's impossible are plain wrong.
I think this hacks post has some useful information on recent HTML5 feature work to support access to local files:
http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/
I'm not sure about using local files as images directly, but at worst, using the techniques demonstrated there, you could create a data: URL to use instead.
JavaScript cannot access the local filesystem for security purposes. Your plug-in will have to work-around this problem.
I need to make new own file upload field using HTML and Javascript since Built-In file upload not showing full path of the file
I need to make it similar to file upload by using button and textbox
please help to solve this problem
You can't.
There are security considerations browsers must adhere to and there is now way around that.
FYI this is also why Firefox doesn't allow drag and drop into a file field.
Just fyi, I think the path display depends on your browser.
If you're willing to/can do so, java (not javascript) might be able to help you with your original problem. Java brings it's own problems, though.
The file upload is a specific input type, which you can't easily replace, but in some browsers you may be able to style it.
You should be able to access the filename from javascript, and display this in a different part of the page (possibly hiding the file input at the same time) so the user can see what will be selected.
Another option is to use Flash for a fancier front-end (see http://www.flickr.com/photos/upload/ (assuming you have a flickr account) as an example), but I've never used one of these as a developer