Put 2 Links on Background Image HTML Mail Message - javascript

I need two pages to be open at once when the user clicks on an image that is being sent in an email message.
I tried to use window.open but when the message is sent to the recipient the link on the image does not work.
Could you help me or tell me a better way to make this possible??
The code:
<img width="500" align="center" src="img_1">

Within email app, it's not possible. As Quentin mentioned above, all of the email consumption software, including Outlook, webmail and iPhone native email app will block your JavaScript in the message.
However, in theory, the result could be achieved using an intermediary landing page, which would perform the all the JS you need, opening two tabs.
I once had a similar project where we implemented intermediary landing page that sniffed the user agent and redirected to the deep-linked mobile website or a different desktop landing page. For example, you would link to your landing page like:
http://yourlandingpage.com?tab1toopen=http://page1.com&tab2toopen=http://page2.com
This raises new issues around:
* URL tracking (and automating encoding and/or optional URL shortening and admin of all of this),
* URL length (which is limited on Windows desktop Outlook clients),
* security of that landing page (lander should sanitize the strings, maybe even do some secret hand-shaking via unique encrypted var), and,
* can it sustain the heavy traffic (which is larger problem that it appears if you work with big brands).

Due to major security issues, scripting is not available in emails. Many clients will strip the scripting completely while others can mark it as spam or block it entirely.
Your best bet would be to have it link to a static landing page that then runs a script to open the two windows for you.
http://javascript.about.com/od/reference/a/jsemail.htm
Some other good sources on what is allowed and not allowed in HTML email:
http://kb.mailchimp.com/campaigns/design/limitations-of-html-email
http://kb.mailchimp.com/templates/code/common-html-mistakes
https://www.campaignmonitor.com/dev-resources/guides/coding/

How about this?
HTML
<img width="500" align="center" src="img_1">
JS
<script type="text/javascript">
function DoThis() {
window.open('http://www.foo.com', _blank); //open link 1 in new tab
window.open('http://www.g1.com.br', _blank); //open link 2 in new tab
}
</script>

Related

tracking user clicks within <iframe> (Wiki game)

I am try to write a simple web based version of the wiki game, which starts with a url and has a goal url that the user must reach only by clicking links in the wikipedia pages. The general idea was to have the starting wikipedia url in an iframe, and within the iframe the user can click links to go to other pages.
The problem is that it seems like there are restrictions on tracking user activity within an iframe unless the contents of the iframe are hosted from the same domain as the web application itself. So if a user clicks on a link within the iframe which leads to another page, I cannot find a way to track the new page that the user has gone to. Even if I could just get the name of the link they clicked on this would be enough. For instance, if the user clicked on a link within the iframe named Europe, I could use PHP to go to a new page and load the new wikipedia iframe dynamically. It would look like the following:
<?php
$article = $_GET["article"];
?>
<iframe id="frame" src="https://en.wikipedia.org/wiki/<?php echo $article ?>"
There just doesn't seem to be an obvious way to track user activity within an iframe. Any suggestions? Also below is a link to a version of the game, which has the same general idea as what I am aiming for. It also appears to use iframes to store the wikipedia pages.
http://cs.mcgill.ca/~rwest/wikispeedia/
For security reasons, if you can't add code to the iframe URL, you can't measure interactions with that page.
However, you could create a proxy that injects some code:
window.postMessage(window.location,'*');
You'll need to rewrite links on the page to refer to your proxy instead of their original targets.
Then on your host page:
window.addEventListener("message", onMessage, false);
function onMessage(event) {
console.log(event.data);
}
It's worth noting that this would effectively let arbitrary code run on a URL belonging to you. That probably presents a security risk.

Detect if page was opened from app

This applies both to Android and iOS. My web page may be sometimes opened by an app (you go to the app, and click a link there which opens the page).
I want to know if the page was accessed through an app or if the user got to it, let's say, by typing the address on the browser.
If accessed through an app, I don't need to know which app it was.
The only thing I know of is document.referrer, but it seems to return "" when the page has been opened by the app. Unfortunately using "" as an indicator is not possible, as other ways of getting to the page may also show "" (for example typing the address). The history object does not seem to contain the info I'm looking for either.
I am using a Zendesk Help Center, so I only have access to the javascript of the page in order to detect this. I can't make changes on the server-side of my page.
Alternatively, I may be able to talk to the people in charge of the app so that they include something when the app opens the browser which would allow me to access that info on the browser, but I am not sure what that could be. Any ideas?
Thank you!
It seems to me like your best bet would be to have specific links for your site that will let you know that the link came from the app.
Like so: http://www.yoursite.com/?openedFromApp
You will use those links inside the app that will be directing users to your website.
That way, if you were using PHP as your server-side language you'd be able to check if the openedFromApp URL parameter was set like so:
<?php
if(isset($_GET['openedFromApp'])) {
echo "The website was opened by an app";
}
else { echo "The website was opened normally"; }
?>
If you want to check if the openedFromApp URL parameter is set using Javascript you'd have to create your own function for accessing URL parameters as Javascript does not have a built-in way of accessing them.
But this link could help you access the URL parameters with Javascript: https://stackoverflow.com/questions/...

Security concerns with same origin iframes [duplicate]

I am planning to create an open source education web app where people can add and edit the content (a bit like Wikipedia).
However I wish to add another feature that allows the user to add their own interactive content using JavaScript. (similar how JSFiddle does it)
What are the security concerns in doing this?
Optional question: How can these issues be overcome?
Yes you could use HTML5 Sandbox to only load user scripts in an IFrame.
You should only host user content from a different domain than your main site. This will prevent any XSS attack if an attacker convinces a user to visit the page directly (outside of the sandbox). e.g. if your site is www.example.com you could use the following code to display the sandboxed IFrame (note .org rather than .com, which is an entirely different domain):
<iframe src="https://www.example.org/show_user_script.aspx?id=123" sandbox="allow-scripts"></iframe>
This will allow scripts, but forms and navigation outside of the IFrame will be prevented. Note that this approach could still risk a user hosting a phishing form to capture credentials. You should make sure that the boundaries between your site and the user content are clear within the user interface. Even though we haven't specified allow-forms, this only prevents a form from being submitted directly, it does not prevent form elements and JavaScript event handlers from sending any data to an external domain.
The HTML5 Security Cheat Sheet guidance on OWASP states this is the purpose of the sandbox:
Use the sandbox attribute of an iframe for untrusted content
You should test whether sandbox is supported first, before rendering the IFrame:
<iframe src="/blank.htm" sandbox="allow-scripts" id="foo"></iframe>
var sandboxSupported = "sandbox" in document.createElement("iframe");
if (sandboxSupported) {
document.getElementById('foo').setAttribute('src', 'https://www.example.org/show_user_script.aspx?id=123');
}
else
{
// Not safe to display IFrame
}
It is safer to do it this way by dynamically changing the src rather than redirecting away if sandboxSupported is false because then the iframe will not accidentally be rendered if the redirect doesn't happen in time.
As a simpler alternative, without the need to check whether the sandbox is supported, you can use the srcdoc IFrame attribute to generate the sandboxed content, making sure that all content is HTML encoded:
e.g.
<html><head></head><body>This could be unsafe</body></html>
would be rendered as
<iframe srcdoc="<html><head></head><body>This could be unsafe</body></html>" sandbox="allow-scripts"></iframe>
Or you could construct a data blob object, being careful to HTML encode again:
<body data-userdoc="<html><head></head><body>This could be unsafe</body></html>">
<script>
var unsafeDoc = new Blob([document.body.dataset.userdoc], {type: 'text/html'});
var iframe = document.createElement('iframe');
iframe.src = window.URL.createObjectURL(unsafeDoc);
iframe.sandbox = 'allow-scripts';
</script>
Of course you could also set the unsafeDoc variable from a JSON data source. It is not recommended to load an HTML file, as this has the same problem of it having to be from an external domain, as the attacker could just entice the user to load that directly.
Also, please don't be tempted to write user content into a script block directly. As shown above, data attributes is the safe way to do this, as long as correct HTML encoding is carried out on the user data as it is output server-side.
In these cases you can leave src as blank.html as older browsers that do not support srcdoc will simply load that URL.
As #Snowburnt touches upon, there is nothing stopping a user script from redirecting a user to a site where a drive-by download occurs, but this approach, assuming a user is up to date on patches, and there are no zero day vulnerabilities, this is a safe approach because it protects its end users and their data on your site via the same origin policy.
One big issue is cross-site scripting where users add code that tells the browser to open and run code from other sites. Say they add something that creates an iFrame or a hidden iFrame pointing to a site and starts downloading malicious code.
There's no simple way around it (thanks to Bergi in the comments) to make sure no elements are created and no ajax calls are made.
I've been a member of sites that provided this functionality, but for those sites I paid for my own space so any vulnerabilities I add are inconveniencing my own clients, in that case it's a little more okay to let that slip by since it's not a security leak for everyone.
One way around this is to create customizable controls for the users to use to add interactivity. The plus is that you control the javascript being added, the minus is that your user base will have to request and then wait for you to create them.

Maintaining Header when Opening Link in InAppBrowser

I'm using ionic framework to develop native app. Here, I'm having default header in all the pages. When switching over to second page, I need in-app browser to view the external content.
So, I used window.open
Click Here to view inapp browser
But, I need the header to be constant when I am viewing the content in in-app browser.
Is it possible in ionic framework?
I don't need iframe for this. It is heavy weighted in html.
Updated:
I m having a html file which I m injecting to iframe. like
<div id="header"></div>
<iframe src="serveraddress/index.html"></iframe>
Instead of iframe, is there anything which remains the header constant? If I use in-app browser, my header was invisible.
EDIT
I had disregarded the in-app browser element in your question. Here is an update, specifically for in-app browser.
DISCLAIMER: none of the code provided below has been tested; however, this answer gives you guidelines to implement your solution.
Instead of iframe, is there anything which remains the header constant? If I use in-app browser, my header was invisible.(...)Header needs to be constant when I'm viewing external website content.
When you use in-app browser:
Click Here to view inapp browser
it opens a popup which displays the requested URL.
You would like to have your own header displayed in the in-app browser window. I see two ways to do this:
A) You could customise the webpage you want to display in your in-app browser beforehand, and store it on your server.
The customised webpage could have included some third party HTML, using one of the 4 techniques mentioned below. See techniques 1, 2a, 2b and 2c.
Say you store a customised webpage on your server which is like so:
<div id="header"></div>
<div id="main"></div>
The page is stored on your own server, at url: www.myserver.com
If you make your in-call like: window.open('http://www.myserver.com',...) you would display your customised page, with your own headers.
B) You could fetch the third party webpage with in-app browser, keep it hidden, modify it, then display it
Please read this Cordova doc page.
To open a window and keep it hidden:
var ref = window.open(url, target,'hidden=yes');
To execute a script when the hidden in-app window is ready:
var iabRef = null;
function insertMyHeader() {
iabRef.executeScript({
code: "var b=document.querySelector('body'); var a=document.createElement('div');document.createTextNode('my own header!'); a.appendChild(newContent);b.parentNode.insertBefore(a,b);"
}, function() {
alert("header successfully added");
});
}
function iabClose(event) {
iabRef.removeEventListener('loadstop', replaceHeaderImage);
iabRef.removeEventListener('exit', iabClose);
}
function onDeviceReady() {
iabRef = window.open('http://apache.org', '_blank', 'location=yes');
iabRef.addEventListener('loadstop', insertMyHeader);
iabRef.addEventListener('exit', iabClose);
}
Now you can show the in-app window: ref.show();
APPENDIX: 4 techniques to use third-party content in your apps:
If the third-party website provides an API (complex solution, but entirable configurable)
e.g. Bing Search API
Some websites provide an API, which responds with bare information, usually returned in the form of a JSON string.
You can use a JavaScript templator like Mustache to create your HTML from the JSON response you got, either server-side or client side. Then you open your popup:
<div id="header"></div>
<div id="myTemplatedHTML"></div>
If you go for the client-side option, I suggest you read open window in javascript with html inserted
2a. If the third-party website does not provide an API: cross-site javascript call
Please read this thread: Loading cross domain html page with jQuery AJAX
You would have in your HTML:
<div id="header"></div>
<div id="myLoadedHTML"></div>
And the myLoadedHTML would be filled with HTML fetched from the third-party website.
I recommend to use a tool like YQL to fetch the HTML. YQL will let you make complex queries to fetch just the bits of HTML you need.
2b. If the third-party website does not provide an API: embed
Please check this thread: alternatives to iframes with html5
It reads that: if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) iframe stays as a good way to do
It also mentions the embed tag:
<embed src="http://www.somesite.com" width=200 height=200 /></embed>
In your case, you could probably achieve your goal with something like:
<div id="header"></div>
<embed src="http://www.somesite.com" width=200 height=200 /></embed>
2c. If the third-party website does not provide an API: iframe
Alternatively, should you want to display a third-party website in an iframe, and then modify the display with your own content, I suggest you check this StackOverflow thread: Cannot modify content of iframe, what is wrong?
In your particular case, say you named your iframe myIframe:
<iframe src="serveraddress/index.html" id="myIframe"></iframe>
You could then achieve your goal with something like this:
$(document).ready(function(){
$('#myIframe').ready(function(){
$(this).contents().find('body').before('<div id="header"></div>');
});
});​
I'm afraid the inAppBrowser Plugin does not support such behavior. It's not listed on their docs here
https://github.com/apache/cordova-plugin-inappbrowser
You can edit the plugin native code for iOS and Android, if have such knowledge.
If you don't want to get into native development (probably), then iframe is the way to go. But you won't be able to edit the contents of the iframe because it will be in a different domain from your application. All you can do is position and size the iframe so that it fills the page right below you application header.
I know it's been a while – just in case somebody is struggling with the same issues: There's a themeable version of cordova's InAppBrowser which is working like a charm, we used it recently in a project.
https://github.com/initialxy/cordova-plugin-themeablebrowser

Javascript redirection / domain specify

I found an nice script while searching and inspecting the elements of some websites.
This is what I have found:
<script type="text/javascript">
//redirect browser to fullscreen preview
if (/^http:\/\/codecanyon\.net/.test(document.referrer))
window.top.location.href = 'http://www.gravitysign.com/backslider/';
</script>
So if I understood from this script it tells jquery if the website is opened over codecanyon redirect them to specifed website for preview.
Now... I was wondering if there is possibility to make something like this.
If we specify an website for example http://google.com and we input that into javascript... And then if that website is uploaded to any other domain, other then google.com ... It will redirect to specified site (google) ?
So to clear things out a little bit let me make an example.
If I made a website for "an-website.com" and then someone take their website and upload it to "another-website.com", it will automatically redirect all visitors from another-website.com to an-website.com.
Hope I was clear enough and hope that this is possible. Cheers!
You can of course redirect any user accessing your site from a domain not matching yours but using javascript. This should work just fine:
if (window.location.hostname !== 'yourdomain.com'){
window.top.location.href = 'http://yourdomain.com';
}
You can also use match, if you host your site on a subdomain, etc.
Keep in mind that any person with write access to the file on the server will be able to remove this "copy protection". Copy protecting client side content is impossible, as you need to serve the content in a way a browser understands, effectively making the content available to anyone.
If you are looking for solution for single domain protection, here you can see my
Redirect Website if its not specified domain in script - Protection using Javascript
I am looking for solution for multiple domain.

Categories