ofirdagan / cross-domain-local-storage Goto Github PK

Hello,

I would like to know if there's any plan for an angular2 version of this component?

Thanks a lot.

So on the Safari v 8.0.2, cross domain local storage doesn't seem to be getting set at all however it's not throwing any errors within the console. No issues from Firefox and Chrome however. Let me know if you have any questions.

Thanks

I think it would be quite easy to add the ability for 2 or more windows who utilize the same cross-domain-local-storage to communicate with each other. Each window would declare their reference-name to the cross-domain-local-storage package...and each window would addEventListener to a specific message that would come from the iframe.

The iframe (in each window) would monitor the localStorage message queue for messages directed at a particular window and call postMessage to deliver that message.

Do you see any problems with this strategy? Do you know of any other packages that attempt this kind of functionalty?

Hello, I am trying your xdLocalStorage and there was a little problem with dependency of xd-utils.js. Error: Uncaught ReferenceError: XdUtils is not defined.

Please write to readme that is important to include xd-utils.js:

<script src="scripts/xd-utils.js"></script>
<script src="scripts/xdLocalStorage.min.js"></script>

Maybe it can help to someone.

myScript.js :-

xdLocalStorage.init(
{
iframeUrl:'https://rawgit.com/ofirdagan/cross-domain-local-storage/master/app/views/cross-domain-local-storage.html',
initCallback: function () {
console.log('Got iframe ready');
xdLocalStorage.setItem('check', 'no callback');
}
}
);

Manifest :-

"content_scripts":[
{
"matches": ["://.com/*"],
"css": ["css/main.css"],
"js": ["js/background.js","js/jq.js","js/xdLocalStorage.min.js","js/myScript.js"],
"html":["html/popup.html"],
"all_frames": true
}]

Hello. i try to install this module on AngularJS v1.2.26.

I get an error, the iframe is null and i have no log 'Got iframe ready' on the console
index.html

<script type='text/javascript' src="resources/vendors/jquery/jquery.min.js"></script>
<script type='text/javascript' src="resources/vendors/bootstrap/bootstrap.min.js"></script>
<script type='text/javascript' src="resources/vendors/angular/angular.min.js"></script>
<script type='text/javascript' src='resources/vendors/angular/ng-xdLocalStorage.min.js'></script>

router.js

interfaceApp.run(function (xdLocalStorage) {
    xdLocalStorage.init({
        iframeUrl:'http://wp5test.XXXnat.org/basket/',
        initCallback: function () {
            console.log('Got iframe ready');
            xdLocalStorage.setItem('check', 'no callback');
        }
    }).then(function () {
        // an option function to be called once the iframe was loaded and ready for action
        console.log('Got iframe ready');
    });

});

I get the following error :

Error: f is undefined
c@http://localhost:63342/trunk/resources/vendors/angular/ng-xdLocalStorage.min.js:1:473
window.xdLocalStorage</<.setItem@http://localhost:63342/trunk/resources/vendors/angular/ng-xdLocalStorage.min.js:1:1427
d/<@http://localhost:63342/trunk/resources/vendors/angular/ng-xdLocalStorage.min.js:1:1987
Ae/e/l.promise.then/F@http://localhost:63342/trunk/resources/vendors/angular/angular.min.js:100:178
Ae/f/<.then/<@http://localhost:63342/trunk/resources/vendors/angular/angular.min.js:101:350
Zd/this.$get</k.prototype.$eval@http://localhost:63342/trunk/resources/vendors/angular/angular.min.js:112:64
Zd/this.$get</k.prototype.$digest@http://localhost:63342/trunk/resources/vendors/angular/angular.min.js:109:160
Zd/this.$get</k.prototype.$apply@http://localhost:63342/trunk/resources/vendors/angular/angular.min.js:112:396
lc[c]</<.compile/</<@http://localhost:63342/trunk/resources/vendors/angular/angular.min.js:194:224
m.event.dispatch@http://localhost:63342/trunk/resources/vendors/jquery/jquery.min.js:3:8384
m.event.add/r.handle@http://localhost:63342/trunk/resources/vendors/jquery/jquery.min.js:3:5122

what i'm doing wrong ?
Thanks

UPDATE 1

I found that in the project there is another iframe using the approximatly the same url but without the angular way :

<iframe id="XXXnatMenu" class="XXXnat-menu" seamless="seamless" scrolling="no" src="http://wp5prod.XXXnat.org/menu/"></iframe>
    <script type="text/javascript">
    window.onload = function() {
 var frame = document.getElementById("XXXnatMenu").contentWindow;
 frame.postMessage({type: "user", username: "Julien", userProfile: "No"}, "http://wp5prod.XXXnat.org/menu/");
 };

 function receiveMessage(event) { 
 if(event.origin == "http://wp5prod.XXXnat.org") {
 if(event.data.type == "redirect") {
     top.window.location.replace(event.data.url);
 }
 }
 }


 window.addEventListener("message", receiveMessage, false);*/
    </script>

If i remove this part the angular local storage work.

UPDATE 2
It works now. i change the windows.onload by a document.onload

I tried this nice library, it works in Chrome(Desktop), but not work in mobile safari. Safari has more strict privacy polices that prevent cross site storage sharing. Is it possible to make this library work on mobile safari ?

It would be nice to let users know that Safari is not supported in the readme.

#10

In the root domain's vue instance (initialized using the vue-cli), I attempted importing the postMessage js file in my main.js, then using the xdLocalStorage.min.js in my subdomain vue instance. It didn't work.

Could you suggest how vue users should go about this?

I have this code: http://pastebin.com/2NShBRhA
Unfortunately getItem is not working. The url is a local rails application. Could you give me hand ?

I'm trying to implement single sign on from an AngularJS project to an Angular 6 project. In Angular 6 I used npm install xdlocalstorage which added your starter project to my node modules but I couldn't get a reference to your xlLocalStoragage.js using import nor could I add a script reference. Not sure if this is an issue but appreciate your help.
Thanks.
Stephen Vajda

There doesn't appear to be a programmatic way to define a whitelist of origins that the iframe will accept requests from. This is something that's recommended by the postMessage (API documentation)[https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage]. It suggests that the receiver of function should "always verify the sender's identity".

By whitelisting, it prevents xdlocalstore from leaking potentially sensitive information

Hello :)

I am trying to use xdlocalstorage with angular an controller but it seems like the iframe is being loaded after the app has run and controller has initialized causing the error

can you please provide some guidance

here is my code, that is based on the xdlocalstorage documentation

var module = angular.module('app', ['xdLocalStorage'])
.config(function (xdLocalStorageProvider) {
xdLocalStorageProvider.init(
{
/* required */
iframeUrl: "http://localhost:58935/iframe.html",
//an option function to be called right after the iframe was loaded and ready for action
initCallback: function () {
console.log('Got iframe ready');
xdLocalStorage.setItem('iframe', 'iframe');
}
});
}).run(function () {
console.log("Hello from app run");
}
).controller('IndexController', ['xdLocalStorage', function (xdLocalStorage) {
console.log("Hello from index controller");

xdLocalStorage.getItem('iframe'); // throw init error

}]
);

and here is the console log

Hello from app run
Hello from index controller
You must call xdLocalStorage.init() before using it.
Got iframe ready

^_^

It seems to me that anyone deploying the "magic iframe" onto their site allows anyone to read their local storage for that site. If that's the case, and no means of mitigation are provided, at the very least this should be expressed clearly at the top of the readme in large lettering to make users aware of the security implications of deploying this code.

My code:

$scope.login = function() {
.......
xdLocalStorage.setItem('authUser', angular.toJson(authUser), function(data) {
console.log(data.success);
if (data.success) {
console.log('Your data has been successfully stored.');
$location.path('/home');
} else {
console.log('Ops, could not store your data.');
}
});
}

BUT

$location.path('/home'); is not run at the first time clicking login but second times $location.path('/home'); is run

Hi, I've config cross domain. here my code

<script src="~/Scripts/Global/xdUtils.min.js"></script>
   <script src="~/Scripts/Global/xdLocalStorage.min.js"></script>
   <script type="text/javascript">
       xdLocalStorage.init(
             {
                 iframeUrl: 'http://xxx.com/auth.html',
                 initCallback: function () {
                     console.log('Got iframe ready');
                 }
             }
     );

and after login success, I set data

  xdLocalStorage.setItem("tokenauth", response.access_token, function (data) {
                            if (data.success) {
                                alert("success");
                            } else {
                                alert("false");
                            }
                        });

When I run this code, it appear success

But when I read data

$(document).ready(function () {
            xdLocalStorage.getItem("tokenauth", function (data) {
                console.log("Token:" + data.value);                
            });          
        })

I get error

Cannot read property 'contentWindow' of undefined

Please, get me idea

Hi,

I've writed a code to adapt my solution to this library.

But, when I store something in one domain and changes to another, stored info is not available.

How can I check if I an done everything right?

I want to thank you so much for creating this awesome tool!

I was wondering if it wouldn't be too much to ask for this to be published in the NPM registry so that we can use it for NPM (and not just bower).

Thanks so much!

TypeError: Cannot read property 'contentWindow' of undefined
    at buildMessage (xdLocalStorage.js:53)
    at window.xdLocalStorage.window.xdLocalStorage.getItem (xdLocalStorage.js:112)
    at ng-xdLocalStorage.js:29

If the iframe fails to load for whatever reason, it should be handled gracefully with a rejection of promise.

Do you have any plan for supporting angular 2 and more?

Hello, I have this problem.

xdLocalStoragePostMessageApi.js:21:

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. 

I tried to use it crossdomain. Domain1 inits xdLocalStorage with option:

iframeUrl:'http://Domain2/index.html',

Any solution?

We need to add mechanism to deal with exceptions:

1. Wrap every api call of localstorage into try catch statement.
2. Add error callback to the API.

This mechanism will provide a graceful notification for case #2