I want to embed Outlook Web App into my site. Show Calendar, mail, people screens directly on pages of my site. I tried to do it via iFrame, but it is forbidden. Is it possible at all?
Contrary to common belief, this is achievable.
There are more details in my blogpost (http://blog.degree.no/2013/06/owa-in-iframe-yes-its-possible/) but here's the code needed. If you run it in "light mode" (flag = 1) there are less issues and it works cross domain, but if you run it within the same domain (e.g. website running on yourdomain.com and your exchange server is running on mail.yourdomain.com) it works fine for "full mode" (flag = 0) as well:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script>
function LoginToOWA(server, domain, username, password) {
var url = "https://" + server + "/owa/auth/owaauth.dll";
// flags 0 = full version, flags 1 = light weight mode
var p = { destination: 'https://' + server + '/exchange', flags: '1', forcedownlevel: '0', trusted: '0', isutf8: '1', username: domain + '\\' + username, password: password };
var myForm = document.createElement("form");
myForm.method = "post";
myForm.action = url;
for (var k in p) {
var myInput = document.createElement("input");
myInput.setAttribute("name", k);
myInput.setAttribute("value", p[k]);
myForm.appendChild(myInput);
}
document.body.appendChild(myForm);
myForm.submit();
document.body.removeChild(myForm);
}
</script>
<body onload="javascript:LoginToOWA('mail.someserver.com','yourdomain','yourusername#someserver.com','yourpassword');">
<img src="../../gfx/loadingAnim.gif" /> Please wait while your inbox is loading...
</body>
</html>
Which version of OWA are you having? I have done this before for our company's intranet on OWA-2003. Just point your iframe to the webpart url like this:
http://server/exchange/user/inbox/?cmd=contents&view=Two-Line%20View&theme=4
This will work only if your main website uses Windows Integrated Authentication. You have to replace "user" with the logged in username using ASP.Net server-side code.
Search MS KB articles for the webpart parameters. You can show inbox, calendar etc.
Related
We have an embedded script running on the page of one our clients. We received a report from them that the query params we send to that page are not properly guarded against XSS injection.
When I try a url like:
https://www.clientsite.com?somekey=%3Csvg%20onload%3Dalert(document.cookie)%3E
on their site, I indeed get the alert panel displaying the cookies.
But when I run our script locally, I cannot reproduce this injection. The alert panel never shows up, no matter what I put in the query param's value.
A very simplified version of the script is:
<html lang="en">
<head>
<meta charset="utf-8">
<title>XSS test</title>
</head>
<body>
<div id="content"></div>
<script>
(function() {
var url = window.location.href
var someKey = 'somekey'
var regexS = "[\\?&]"+someKey+"=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(url);
var parentElement = document.querySelector('#content');
var widget = document.createElement('div');
// var svgInjection = '<svg onload=alert("alert!!")>'
// var svgEncodedInjection = '%3Csvg%20onload%3Dalert("alert!!")%3E'
widget.innerHTML = '<div>' + results[1] + '</div>';
return parentElement.insertBefore(widget, parentElement.firstChild);
})()
</script>
</body>
</html>
I don't understand how an identical script, receiving identical query params, shows an alert panel on the client's site, and nothing when I run it locally. Any thoughts?
I found similar threads but unfortunately didn't help resolve my issue so posting a new thread
I am trying to consume the linked API through localhost. The error I am getting is:
Uncaught Error: You must specify a valid JavaScript API Domain as part of this key's configuration.
Under Javascript Settings, Valid SDK Domains I added
http://127.0.0.1
http://127.0.0.1:8704
http://localhost
http://localhost:8704
http://localhost
I tried adding in https as well but still I am facing the same error.
I tried creating a ASP.NET project in Visual studio and tried running my html file with the associated port number which also I added in valid SDK domain, still the same issue.
My code is below:
<html>
<head>
<script type="text/javascript" src="https://platform.linkedin.com/in.js">
api_key: [MY KEY] //Client ID
onLoad: OnLinkedInFrameworkLoad //Method that will be called on page load
authorize: true
</script>
</head>
<script type="text/javascript">
function OnLinkedInFrameworkLoad() {
console.log('OnLinkedInFrameworkLoad');
IN.Event.on(IN, "auth", OnLinkedInAuth);
}
function OnLinkedInAuth() {
console.log('OnLinkedInAuth');
IN.API.Profile("me").result(ShowProfileData);
}
function ShowProfileData(profiles) {
console.log('ShowProfileData' + profiles);
var member = profiles.values[0];
var id = member.id;
var firstName = member.firstName;
var lastName = member.lastName;
var photo = member.pictureUrl;
var headline = member.headline;
//use information captured above
var stringToBind = "<p>First Name: " + firstName + " <p/><p> Last Name: "
+ lastName + "<p/><p>User ID: " + id + " and Head Line Provided: " + headline
+ "<p/>"
document.getElementById('profiles').innerHTML = stringToBind;
}
</script>
<body>
<div id="profiles"></div>
</body>
</html>
While building a chat application in Django, I used embedded javascript and it worked. But, if I write the same code in external javascript then the WebSocket gets closed. I have checked all the links and static file path. The script is loaded completely but the WebSockets gets closed after they open.
Here's the tutorial from Official Django Channels website, and that javascript is working in embedded form only not in an external script.
And, here's my Github repo where I've implemented Websockets.
How can I write JS code in external script instead of embedded? I've Googled but found no help and even this question hasn't been answered yet.
Here's the code I'm talking about and the websockets won't work if defined externally:
<!-- chat/templates/chat/room.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Chat Room</title>
</head>
<body>
<textarea id="chat-log" cols="100" rows="20"></textarea><br/>
<input id="chat-message-input" type="text" size="100"/><br/>
<input id="chat-message-submit" type="button" value="Send"/>
</body>
<script>
var roomName = {{ room_name_json }};
var chatSocket = new WebSocket(
'ws://' + window.location.host +
'/ws/chat/' + roomName + '/');
chatSocket.onmessage = function(e) {
var data = JSON.parse(e.data);
var message = data['message'];
document.querySelector('#chat-log').value += (message + '\n');
};
chatSocket.onclose = function(e) {
console.error('Chat socket closed unexpectedly');
};
document.querySelector('#chat-message-input').focus();
document.querySelector('#chat-message-input').onkeyup = function(e) {
if (e.keyCode === 13) { // enter, return
document.querySelector('#chat-message-submit').click();
}
};
document.querySelector('#chat-message-submit').onclick = function(e) {
var messageInputDom = document.querySelector('#chat-message-input');
var message = messageInputDom.value;
chatSocket.send(JSON.stringify({
'message': message
}));
messageInputDom.value = '';
};
</script>
</html>
I'm using the PhotoEditorSDK in my application,
but I'm getting the attached error.
in the annex also follows the code that I used to arrive at these results.
It seems to be cross-origin problem
but the SDK has a specific part to it.
I opened called with the support of the company, but so far nothing.
If someone has already experienced this problem, know the reason, or how to solve.
Please help me ;-;
"use stricts";
/*link = http://localhost:8080/editar?&page=1&url=https://photos.google.com/lr/photo/AGj1epXDcMoRlOQ7QcWY9dZ2ALBIqhfJuTSz-ywrilsUhstrZ7wo26XkgDSBk4Jx2nJuIPm3LCFoKuo
*/
var editor;
var vars = getUrlVars();
var page = vars.page;
var url = vars.url;
window.onload = function () {
var container = document.getElementById('editor');
var img = new Image();
img.src = url;
editor = new PhotoEditorSDK.UI.ReactUI({
container: container,
enableUpload: false,
crossOrigin: 'anonymous',
editor: {
image: img,
responsive: true,
enableZoom: false,
controlsOrder: ['transform', 'filter', 'adjustments', 'focus'],
export: {
download: false,
format: 'image/jpeg',
type: PhotoEditorSDK.RenderType.BLOB
},
},
//your license below
license: 'license',
assets: {
baseUrl: '/assets'
},
});
}
function getUrlVars() {
console.log(window.location.href);
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf("#") + 1).split("&");
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split("=");
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
<html>
<head>
<script src="/js/jquery-1.11.3.min.js"></script>
<!-- React Dependencies for the SDK UI -->
<script src="js/vendor/react.production.min.js"></script>
<script src="js/vendor/react-dom.production.min.js"></script>
<!-- PhotoEditor SDK-->
<script src="js/PhotoEditorSDK.min.js"></script>
<!-- PhotoEditor SDK UI -->
<script src="js/PhotoEditorSDK.UI.ReactUI.min.js"></script>
<link rel="stylesheet" href="css/PhotoEditorSDK.UI.ReactUI.min.css" />
</head>
<body>
<div id="editor" style="width: 100%; height: 100%; padding-top: 65px;"></div>
<script src="js/editar.js"></script>
</body>
</html>
You need to wait for the image to load before pushing it to PhotoEditorSDK.
You should move your editor = block of code into the img.onload="" method.
Regards,
In the console, there's error message saying that the resource could not be loaded because of same-origin policy.
What you have to do is to enable CORS (Cross-origin resource sharing) for loaded resource. You can see more information here.
However, you may not have controll over loaded resources (e.g. allowing users to add image by specifying external URL).
In this case, you should think about implement a PHP "proxy" that will download image on your server (n.b. same-origin policy is for browsers) and then serve that image to the front-end. You have two options:
Store the image on your server's filesystem and proceed the URL.
Directly serve the content of image to the client, e.g. you could encode the image in base64 and retrieve it via XHR request.
The following is a JavaScript file that searches through YouTube video data using its API. Down at the bottom you'll see the onSearchResponse() function, which calls showResponse(), which in turn displays the search results.
As this code from Codecademy stands, a HUGE amount of information gets printed relating to my search term.
Instead of all that, can I simply display a hyperlink using the title and videoId attributes? How would I go about altering responseString in showResponse() to build that link? Thank you!
// Your use of the YouTube API must comply with the Terms of Service:
// https://developers.google.com/youtube/terms
// Helper function to display JavaScript value on HTML page.
function showResponse(response) {
var responseString = JSON.stringify(response, '', 2);
document.getElementById('response').innerHTML += responseString;
}
// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}
// Called automatically when YouTube API interface is loaded (see line 9).
function onYouTubeApiLoad() {
// This API key is intended for use only in this lesson.
// See link to get a key for your own applications.
gapi.client.setApiKey('AIzaSyCR5In4DZaTP6IEZQ0r1JceuvluJRzQNLE');
search();
}
function search() {
// Use the JavaScript client library to create a search.list() API call.
var request = gapi.client.youtube.search.list({
part: 'snippet',
q: 'clapton'
});
// Send the request to the API server,
// and invoke onSearchRepsonse() with the response.
request.execute(onSearchResponse);
}
// Called automatically with the response of the YouTube API request.
function onSearchResponse(response) {
showResponse(response);
console.log(response);
}
Here is the corresponding HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="stylesheets/styles.css">
<meta charset="UTF-8">
<title>My YouTube API Demo</title>
</head>
<body>
<section>
<div id="response"></div>
</section>
<script src="javascripts/search-2.js"></script>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
</body>
</html>
Your advice is much appreciated!
I think it might be what you are exactly trying to do.
function showResponse(response) {
var html = response.items.map(itemToHtml);
document.getElementById('response').innerHTML += html;
}
function itemToHtml(item) {
var title = item.snippet.title;
var vid = item.id.videoId;
return generateHyperlink(title, vid);
}
function generateHyperlink(title, vid) {
return '' + title + '<br/>';
}
This code show up links named title having YouTube video link using videoId.