I'm new to clojurescript/reagent and am testing out ideas for a media display app.
At the moment I'm having problems with a few more specific elements of including html5 media components on my page and using their full features.
Example - including #t=10,10 at the end of a video source string(referenced here https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video) will sometimes work but only take the end range value.
Same video element - using any attributes that aren't true/false will break compilation. e.g :preload auto doesn't work whereas :fullscreen false does.
Is there a clojurescript way to handle these elements or is this more js interop territory?
Since clojurescript will be compiled to JS eventually. Everything JS can do..clojurescript could do it equally well.
your "sometime work" issues are related to the nature of ReactJS ( Reagent is a wrapper of ReactJS ). Generally, you need to obtain the dom node of video tag to use most of the video tag's features.
Related issues
Video displayed in ReactJS component not updating
Example
Source Code Example of how to interact with video tag under ReactJS.
https://github.com/eisneim/react-html5-video/blob/master/src/Video.js
You should provide the minimum case to produce the problem, so others could help you.
Related
Zurb Foundation's data-interchange works beautifully for me. In development.
But then I build and I end up with this sort of html:
<img alt='Why Believe' data-interchange='[/assets/images/logo.svg, (default)], [/assets/images/logo-square.svg, (medium)]'>
<noscript>
<img alt='Why Believe' src='/assets/images/logo-e8f041ee.svg'>
</noscript>
Can you spot the problem?
Middleman's build process smartly fingerprints all of the assets, and links to the fingerprinted ones. No "un-fingerprinted" assets get built. I want all of that.
But the asset paths in the data-interchange attribute get no fingerprints. Therefore they work in development, but not once built and deployed.
How can I make it so the data-interchange asset paths also get the fingerprint? (And if middleman calls the -e8f041ee something other than "fingerprint", please let me know!)
If you are going to use asset hashs then you should consider moving your images used by interchange to a new directory so they aren't automatically hashed. If you are not hosting on a CDN based setup, you should consider turning the cash busting hashes off.
For example I place images in source/blog/featured-images rather than /images/blog/... to avoid them being hashed for a similar reason (because I am defining the name via yml frontmatter.
I could see blog post from 2011 recommending using "-" instead of "~".
What is the best practice to write media URL in Sitecore 6.5 on .NET 4.0/IIS7.5? Should I keep default /~/media/ or follow blog post advice using /-/media/ or while I am there, why not just use /media/?
I suspect the use of ~ is for legacy reasons. The current recommendation is to use -/media as you point out, but you could use whatever you wanted and it would work. The issue you have just using /media/ is if there is any other item with that as part of the name then it will trigger the media handler, rather than serving up your content for example.
For example, as request for /blah/blah/blah/-/media/images/logo.png will serve up the image correctly, /about/media/news/2013/12/20/sitecore.aspx should in fact serve up a page but will trigger the media handler and return a 404 just using /media/. So if you are going to use something else then make sure it is unique, you may need to enforce it since content editors can be a bit funny about remembering things like this.
Since you are currently using Sitecore 6.5 then I can assume you have existing content. Make sure you leave the existing ~/media trigger to allow your Rich Text fields to continue to work
If you update the Media.MediaLinkPrefix setting on a system that
already has some content in a database, Sitecore may not update the
values in all Rich Text Editor fields that contain values in the old
formats, including inline images and links to media items.
Sitecore Idiosyncrasies: Media URLs
I would probably go ahead and set Media.RequestExtension to an empty string so that image urls are served up with the correct media extension too.
I know this problem appear just when are you using .Net Framework 2.0
Please see next link .
If you run your website under .Net Framework 4.0 and IIS 7.5 you don't have this vulnerability.
Also this document explain a little bit about using of tilde.
Also you can check John West blog about /~/media
So the conclusion is use -/media for media files.
For projects using Sitecore 7.2, you may want to stick to using a tilde or apply the hot-fix mentioned in the following KB article.
https://kb.sitecore.net/articles/998758
Background: I'm starting off with Django, and have limited experience with Python, so please bear with me. I've written a Python script that runs periodically (in a cron job) to store data into a SQLite3 database, from which I'd like to read from and generate images with Matplotlib (more specifically, with Basemap). This started off as an interest in learning Python and building an "interesting" enough project. I'm picking the Django framework because it seems reasonably-well documented, although I was pleasantly surprised by web.py because of its "lightweightness" in its requirements (but web.py's sparse documentation makes it a bit harder to start off with); but at the moment, I'm not entirely dead-set on a framework.
The example in question 1874642 is almost what I'm looking for, with an image being generated on-the-fly without requiring having to write it to disk (and thusly having to deal with periodically cleaning up the generated files).
However, what is not clear to me is how the generated image can be incorporated in a template, instead of having the browser simply showing the image. From the tutorial material, I'm guessing that it should be possible to represent the variables incorporated in some django.template.Context into the django.http.HttpResponse, but the referenced example shortcuts it by responding directly with a Mime object instead of building it with a Context.
So what I'm asking is:
Is it necessary to invoke a print_png on the generated Matplotlib FigureCanvas object? Or is the FigureCanvas copyied "unprinted" to the Context, so that in the Django template I explicity write the HTML img tag and put by hand the tag's attributes?
I'm under the impression that I have to write the Canvas to disk (i.e. do a canvas.print_figure("image.png")), so that the HTML img tag sees it in the Django template. But I want to be sure that there isn't a "more manageable way" -- i.e. passing the image in the Context and having the template "magically" generate it. If it's really necessary to write to disk, I suppose I could use Django's filesystem caching facility to write the generated images in some way (checking whether an image was already written for a given input parameter set, of course). I welcome your suggestions on this regard, since it's not yet clear at this time the size and number of the images that will be generated, and thusly I'm looking to avoid spending disk space and instead prefer waiting for an image to be generated (even if it takes a few seconds).
Thank you in advance.
you can pass a StringIO object to pyplot.savefig(), and get the PNG file content by StringIO.getvalue().
This view would serve a PNG image. Just bind it to some URL like "img.png" and use that in an img tag.
def create_fig(request):
# MPL stuff
response = HttpResponse(content_type='image/png')
fig.savefig(response)
return response
Of course, that assumes that you can generate the image independent of the main view. You can pass arguments to the image, like (in urls.py):
url(r'^img(?P<nr>\d+).png$', create_fig),
which passes a (string repr. of) a number nr to create_fig.
In my C++ app I'm embedding (via COM) a web browser (Internet Explorer) control (CLSID_WebBrowser).
I can display my own html in that control by using IHTMLDocument2::write() method but if the html has <img src="foo.png"> element, it's not displayed.
I assume there is a way for me to provide the data for foo.png somehow to the web control, but I can't find the right place to hook this functionality?
I need to be in full control of providing the content of foo.png, so work-arounds like using res:// protocol or saving to disk and using file:// protocol are not good enough. I just want to plug my code somehow so that when embedded CLSID_WebBrowser control sees <img src="foo.png"> in html data given with IHTMLDocument2::write() it will ask me to provide this data.
To answer my own question, the solution that finally worked for me is:
register custom IInternetProtocol/IInternetProtocolInfo/ via custom IClassFactory given to IInternetSession::RegisterNameSpace(). For reasons that seem like a bug to me, it has to be a protocol already known to IE (I've chosen "its") even though it would be much better if it was my own, unique namespace.
feed html data via custom IMoniker through IPersistentMoniker::Load() and make sure that IMoniker::GetDisplayName() (which is a base url according to which relative links in provided html will be resolved) starts with that protocol scheme (in my case "its://"). That way relative link "foo.png" in the html data will be its://foo.png to IE which will make urlmon call IInternetProtocol::Start() and IInternetProtocol::Read() to ask for the data for that url.
This is all rather complicated, you can look at the actual (BSD-licensed) code here:
http://code.google.com/p/sumatrapdf/source/browse/trunk/src/utils/HtmlWindow.cpp
You can embed a small webserver such as mongoose and reference those impage from there.
In mongoose, you can attach callback to specific path, thus returning images from C++ code.
We use this for our debugging tools, where each images is accessible from a web interface
The easiest solution would be a Data URI. You'd inline out the image directly with IHTMLDocument2::write().
Any idea how one would go about preventing XSS attacks on a node.js app? Any libs out there that handle removing javascript in hrefs, onclick attributes,etc. from POSTed data?
I don't want to have to write a regex for all that :)
Any suggestions?
I've created a module that bundles the Caja HTML Sanitizer
npm install sanitizer
http://github.com/theSmaw/Caja-HTML-Sanitizer
https://www.npmjs.com/package/sanitizer
Any feedback appreciated.
One of the answers to Sanitize/Rewrite HTML on the Client Side suggests borrowing the whitelist-based HTML sanitizer in JS from Google Caja which, as far as I can tell from a quick scroll-through, implements an HTML SAX parser without relying on the browser's DOM.
Update: Also, keep in mind that the Caja sanitizer has apparently been given a full, professional security review while regexes are known for being very easy to typo in security-compromising ways.
Update 2017-09-24: There is also now DOMPurify. I haven't used it yet, but it looks like it meets or exceeds every point I look for:
Relies on functionality provided by the runtime environment wherever possible. (Important both for performance and to maximize security by relying on well-tested, mature implementations as much as possible.)
Relies on either a browser's DOM or jsdom for Node.JS.
Default configuration designed to strip as little as possible while still guaranteeing removal of javascript.
Supports HTML, MathML, and SVG
Falls back to Microsoft's proprietary, un-configurable toStaticHTML under IE8 and IE9.
Highly configurable, making it suitable for enforcing limitations on an input which can contain arbitrary HTML, such as a WYSIWYG or Markdown comment field. (In fact, it's the top of the pile here)
Supports the usual tag/attribute whitelisting/blacklisting and URL regex whitelisting
Has special options to sanitize further for certain common types of HTML template metacharacters.
They're serious about compatibility and reliability
Automated tests running on 16 different browsers as well as three diffferent major versions of Node.JS.
To ensure developers and CI hosts are all on the same page, lock files are published.
All usual techniques apply to node.js output as well, which means:
Blacklists will not work.
You're not supposed to filter input in order to protect HTML output. It will not work or will work by needlessly malforming the data.
You're supposed to HTML-escape text in HTML output.
I'm not sure if node.js comes with some built-in for this, but something like that should do the job:
function htmlEscape(text) {
return text.replace(/&/g, '&').
replace(/</g, '<'). // it's not neccessary to escape >
replace(/"/g, '"').
replace(/'/g, ''');
}
I recently discovered node-validator by chriso.
Example
get('/', function (req, res) {
//Sanitize user input
req.sanitize('textarea').xss(); // No longer supported
req.sanitize('foo').toBoolean();
});
XSS Function Deprecation
The XSS function is no longer available in this library.
https://github.com/chriso/validator.js#deprecations
You can also look at ESAPI. There is a javascript version of the library. It's pretty sturdy.
In newer versions of validator module you can use the following script to prevent XSS attack:
var validator = require('validator');
var escaped_string = validator.escape(someString);
Try out the npm module strip-js. It performs the following actions:
Sanitizes HTML
Removes script tags
Removes attributes such as "onclick", "onerror", etc. which contain JavaScript code
Removes "href" attributes which contain JavaScript code
https://www.npmjs.com/package/strip-js
Update 2021-04-16: xss is a module used to filter input from users to prevent XSS attacks.
Sanitize untrusted HTML (to prevent XSS) with a configuration specified by a Whitelist.
Visit https://www.npmjs.com/package/xss
Project Homepage: http://jsxss.com
You should try library npm "insane".
https://github.com/bevacqua/insane
I try in production, it works well. Size is very small (around ~3kb gzipped).
Sanitize html
Remove all attributes or tags who evaluate js
You can allow attributes or tags that you don't want sanitize
The documentation is very easy to read and understand.
https://github.com/bevacqua/insane