I am using fancybox(lightbox like js popup library) to show photo and it's title in popup. Photos are uploaded by user with supplied title. I also escaped the photo title when displaying the photo in html. the html tags are simple as:
<img src="/files/909221123.medium.JPG">
As you can you see, the js tag in title is escaped. However, it runs regardlessly when displayed in fancybox popup - I click the photo which prompts a js alert popup then a fancybox popup with the photo.
That is a XSS problem for sure but I thought it is so obvious and fancybox shouldn't have this sorta problem at the first place. Did I do something wrong here? and How to fix it?
thanks.
Sounds like Fancybox is treating that string as HTML instead of text.
You could hack the plugin. There is code that handles the title such as...
return '<table id="fancybox-title-float-wrap" cellpadding="0" cellspacing="0"><tr><td id="fancybox-title-float-left"></td><td id="fancybox-title-float-main">' + title + '</td><td id="fancybox-title-float-right"></td></tr></table>'
As you can see, by the time title is there, it has had its entities resolved.
Otherwise, you could strip out portions of the string which look like HTML tags with a regex.
Related
I’m trying to make a scraper project that takes links and displays on a html page but you can’t use html tags in pyscript tag.
Is there any way to do it
What I find with printing the link is that it gives the literal string of the link and not a clickable link
This isn’t the actual code but acts as an an example of the problem
<py-script>
Var= ‘Link’
</py-script>
<body>
<a href=link>Link</a>
</body>
You have created a clickable anchor tag. Move your mouse over the text and click it.
The problem is that the pyscript.css file is overwriting the attributes of some HTML tags changing how they appear. Remove pyscript.css from your program and notice the difference.
You could add your own CSS and make the Anchor Element appear how you want. To write serious PyScript programs you will need to learn about the browser DOM, CSS, etc.
I have a problem when I genereate email via MJML. The email looks great, but there is a problem in Outlook where it shows the source url of the first image in the mail instead of texts or the alt-text in the short description of the email. I'm expecting it might have something to do with that we use CDN to hosts our images, but I have no clue. See the image below:
Does anyone know what I can do to solve this issue?
Not sure why its not showing your alt text, it should work that way, in any case you can always add your preview text to the html directly after the body tag and hide it with css like this:
<body>
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;margin-right:100%;">
Your Preview Text Here
</div>
I have a content management system that uses TinyMCE to edit text, and I am using the inline option. The issue I have is when the content contains an iframe - when TinyMCE is initialised, it converts the iframes to an image tag:
<img data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="0" data-mce-p-src="https://www.youtube.com/embed/xxxxx" width="560" height="315" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-mce-object="iframe" class="mce-object mce-object-iframe" data-mce-src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
I then need to get the edited HTML to save to the server. The docs for this functionality give no suggestion on how to do this, so currently I use jQuery to just get the HTML content of the element the TinyMCE editor was initialised on, however this contains the image tag instead of the original iframe, which is what then gets saved.
Is there a better way to get the HTML from n inline TinyMCE instance, or change how TinyMCE displays iframes?
Here is a TinyMCE Fiddle that shows TinyMCE running inline with an iFrame in the content. When I use getContent() to extract the content it just shows as an iFrame.
http://fiddle.tinymce.com/rkgaab
As a rule of thumb I would not use jQuery to try to get the raw HTML as TinyMCE does a variety of things to accommodate for how inline editing works. The getContent() API is documented here:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#getcontent
I would like to display a facebook-like button within the Fancybox popup.
The interaction I'm imagining is similar to how Pinterest displays the social sharing buttons to the right of a modal popup (e.g. http://pinterest.com/pin/73465037641354472/). Each image has a unique url so that you can link to the content of the popup directly.
How can I:
Ensure that each image within my Fancybox gallery is attached to a unique URL
Display a Like button in the popup linked to that unique URL
For #1, I found the following code discussed in the following page: this.id inside of fancybox
$("a.fancybox").each(function() {
var element = this;
$(this).fancybox({
'titleFormat' : function() {
var astring = '<span>' + element.id + '</span>';
return astring;
}
});
});
Is this the code that I need? If so, what do I do in the HTML in order for this JavaScript to work properly?
Thanks so much for any help!
You will need to have a mechanism that based upon a unique URL to serve off the correct http://ogp.me og: meta tags to be parsed by Facebook's linter.
Remember the linter does not run javascript, so they will need to be correctly defined in the response stream.
EDIT
Example of each image having it's own URL. These will aid in Facebook being able to get the correct html and og: tags.
http://example.com/images.php?id=1
http://example.com/images.php?id=2
http://example.com/images.php?id=3
Within the HTML response from each of those unique URLs, the correct og: tags are specified. Within that HTML you should have a javascript redirect to the actual page to display the picture. Since javascript wont be run by the linter, the linter should be able to read those og: tags.
See http://ogp.me for how to specify og tags.
I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps