{"_id":"@ajbogh/pm.js","name":"@ajbogh/pm.js","dist-tags":{"latest":"1.0.1-alpha.0"},"versions":{"1.0.1-alpha.0":{"name":"@ajbogh/pm.js","version":"1.0.1-alpha.0","scripts":{"build_old":"gulp build","lint":"eslint .","copy":"cp src/PM.mjs build/","min":"uglifyjs --compress --output build/PM.min.mjs -- src/PM.mjs","build":"run-p copy min","serve:parent":"node server-parent.js","serve:child":"node server-child.js","dev":"run-p copy min && run-p serve:parent serve:child","watch":"npm-watch dev","serve_old":"gulp serve","start_old":"gulp","watch_old":"gulp watch"},"watch":{"dev":{"patterns":["src","sample"],"extensions":"html,mjs,js"}},"devDependencies":{"browser-sync":"^2.27.10","eslint":"^8.25.0","express":"^4.18.2","gulp":"^4.0.2","gulp-jshint":"^2.1.0","gulp-minify":"^3.1.0","gulp-notify":"^4.0.0","gulp-rename":"^2.0.0","gulp-uglify":"^3.0.2","gulp-webserver":"^0.9.1","jshint":"^2.13.5","jshint-stylish":"^2.2.1","npm-run-all":"^4.1.5","npm-watch":"^0.11.0","uglify-js":"^3.17.3"},"gitHead":"cdbb3d880d2ebdd95ecc741959bb9e07227671c4","description":"PM.js =====","_id":"@ajbogh/pm.js@1.0.1-alpha.0","_nodeVersion":"10.24.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-YHf6CnIe7bVPHz50dBx88XqcQ9fy9dKJw8pSLIBAQ/ge5pa9hj0k6mpwJ30lPPXre8CR08vB5XrL/qySB0i75A==","shasum":"5927f0eba7377f47ef1e4e4beb00af484f26b138","tarball":"https://registry.npmjs.org/@ajbogh/pm.js/-/pm.js-1.0.1-alpha.0.tgz","fileCount":62,"unpackedSize":395554,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFctr361Bvdx9CpQ60ffjFNOB2WMhx0Vm5akWOyIZLMgIgWUeJHovJNpkmGXpheID5st/2Kr9uZA3grLP8zY6E/qI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkDX7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZpg//ed/bHQmNiZBtgCcWLCgqwwGL8OOKLwlwhM+G5VFfyTAvYjEv\r\neUqF71aleiENrqmVwlYQd0RYEr1JVhrD2j/E27yGO0q0zedbJ1rhQ6qMQvJp\r\n3PboNS0ZsNcPkvc9hYALY3FzejcbLD/TXnqMQ8KqB9FDIx2UH7WOaj3DtS3n\r\nh6q5dykf/7eVJvFx2FFGuuXdk1aA+ChTyc3rKRjaSPCzhXlh2warFHiscXCA\r\nzxsN4VKAEd+QeeYWZ05haGuv0BYU0KfkNVK4Z5iTk4DBZVF05kdwyGwNA8gV\r\nAkTtHH71OFoDTtc8zhZqDI7hwLc/l3P8lgoafixfHebi8tS3syqw7iU5YXpg\r\nzCPYi25/k4eY0DG5IlkZSycHiJOV/510Z8Bv4JYCRKfgTUl0PRMyJdWlkoXa\r\n3tUbV+vbCOzlE/abvT6Ah+YK1K4dRCPL2BqFbUAHaCHxHoNFO5e6w+6Qbr0u\r\nCLT+pvdrgpDoMk8ej8MoqIxzSeyNUKYGnrCKHbhCDaI5m1tx9azRyo11qTQf\r\nx5+rUlQmNBxp8IORv43Hie0S0pxRfwvyM7phaKBHV5vtqaW8G2eGu1CBSet6\r\noyV1t2eU26FY50BuU3WQFH21/VRQR4NKvsiPBRVNqAS76th0fR8Ig3z2NUzL\r\na9rp6awrhjxPfyIkq6+G3bprdSwLNIbgkhM=\r\n=+fbw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ajbogh","email":"ajbogh@allanbogh.com"},"directories":{},"maintainers":[{"name":"ajbogh","email":"ajbogh@allanbogh.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pm.js_1.0.1-alpha.0_1670395387200_0.9545400790944005"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-07T06:43:07.147Z","1.0.1-alpha.0":"2022-12-07T06:43:07.484Z","modified":"2022-12-07T06:43:07.625Z"},"maintainers":[{"name":"ajbogh","email":"ajbogh@allanbogh.com"}],"description":"PM.js =====","readme":"PM.js\n=====\n\nA complete, simple, effective, and secure postMessage solution for your websites.\n\nPM is a simple postMessage wrapper that handles setup, security, communication, and callbacks.\nIt's very simple to use, as you will see below.\n\n[Github Page Link](http://ajbogh.github.io/PM.js/)\n\nAbout postMessage requests\n--------------------------\n\nA quick lesson on what postMessage is and how it's used is in order. \n\npostMessage is a communication mechanism which can be used to send data to and from different domains. \nEach domain must include code which allows it to communicate with another. The browser performs various \nsecurity checks on the origin of the request to make sure that one domain can send data to another. \nFacebook, Google, and Disney have all implemented a form of postMessage for their cross-domain login systems.\n\nHow postMessage works\n---------------------\n\nOne website sets up an iframe or window to another domain's webpage. Once the iframe is ready then the\npostMessage requests can flow back and forth through the iframe and the parent window. \n\nEach request is accompanied by an origin domain part. This origin domain must match the protocol, domain, \nand port of the other domain that the website is communicating with. It can also be a wildcard \"*\" character, \nsignifying that the security mechanism can be eliminated to allow all postMessage requests to go through.\n\nInspiration\n-----------\n\nYou may have heard about easyXDM by now if you've been googling for an answer to postMessage or cross-domain\ncommunication. \n\nI developed this solution as a way to memorialize the knowledge that I gained as the lead developer of Disney's \nlatest login website. At first we utilized easyXDM for much of the postMessage internals, using a 3 tiered iframe \napproach, which led to huge delays in the request times.\n\nAfter much improvements to the internals, we began implementing a 2 tiered approach using the parent website\nand the internal iframe which pointed to our login website. Without going into further detail, this\nsolution is based on the initial understanding of easyXDM's RPC calls, and the knowledge from working \nextensively with postMessage requests.\n\nShared code (implement on both websites)\n----------------------------------------\n\nBoth websites must include the PM.js or PM.min.js code (found in the [src](https://github.com/ajbogh/PM.js/tree/master/src) or [build](https://github.com/ajbogh/PM.js/tree/master/build) directory).\n\n    <script type=\"text/javascript\" src=\"js/PM.js\"></script>\n\nWith this one line, PM.js is activated and listening on the website. It will handle any postMessage requests immediately.\n\n**Security is a feature and a requirement**. Add some authorized URLs to your webpages.\n\n    PM.addAuthorizedUrl(\"http://otherdomain.com\");\n\nNow your webpage will handle and authorize the postMessage requests from otherdomain.com\n\nIf you want to open the floodgates to all domains (danger Will Robinson!) then pass a \"*\" to this method.\n\n    PM.addAuthorizedUrl(\"*\");\n\nYou can even pass an array!\n\n    PM.addAuthorizedUrl([\n    \t\"http://otherdomain.com\",\n    \t\"http://www.otherdomain.com\", //don't forget, subdomains are counted as separate domains altogether!\n    \t\"http://otherdomain.com:8080\", //ports are required as well\n    \t\"https://otherdomain.com\", //https is allowed, you cannot create an http iframe from an https site however!\n    \t\"*\" //mix and match, this will overide all prior entries and allow all traffic again!\n    ]);\n\nAdd some functions to listen for. The other website will be making requests to these functions. The parent website can have its own functions registered for callbacks.\n\n    PM.registerListener(\"test\", function(data){\n    \tconsole.log(\"got test\");\n    \tconsole.log(data);\n    }).registerListener(\"othertest\", function(data){\n    \tconsole.log(\"in othertest\");\n    \tconsole.log(data);\n    });\n    \n    // Alternatively\n    \n    PM.on(\"test\", function(data){\n        console.log(\"got test\");\n        console.log(data);\n    }).on(\"othertest\", function(data){\n        console.log(\"in othertest\");\n        console.log(data);\n    });\n\nMaking a Request\n----------------\n\nPosting a message is a one-line request.\n\n    PM.postMessage(\"testhandle\", \"test\", {my:\"test\", test:\"is good\"}, \"callbackMethod\", \"http://otherdomain.com/PMWebpage.html\");\n    \n    // Alternatively\n    \n    PM.send(\"testhandle\", \"test\", {my:\"test\", test:\"is good\"}, \"callbackMethod\", \"http://otherdomain.com/PMWebpage.html\");\n\nLet's look at the parameters a little.\n\n- \"testhandle\": A unique handle or ID to the iframe. Any request made to the domain will use this handle. This allows you to alias domains once they've been initialized.\n\n- \"test\": The registered method within the other domain to execute. In this case \"test\". See above for how the other domain registered this function.\n\n- {somedata:values}: The JSON, string, boolean, numerical, or other primitive value you wish to send. You cannot send functions through postMessage!\n\n- \"callbackMethod\": (Optional) A name for a previously registered callback that the first domain registered using the registerListener function. This can also be a function, which will make the system automatically register it with a custom name and delete it from the object later. See below.\n\n    PM.postMessage(\"testhandle\", \"test\", {my:\"test\", test:\"is good\"}, function(data){ console.log(data); });\n\n- \"http://otherdomain.com/PMWebpage.html\": (Optional*) A webpage to create an iframe for and post a message to. *This is only required upon first calling postMessage for that domain or unless you call the PM.preloadUrl() function.\n\nThe PM.preloadUrl function can be called upon page instantiation ( $(document).ready() ) to allow PM.js to create the iframes and initialize the other webpage to allow instantaneous postMessage requests once the iframe is fully loaded.\n\n    PM.preloadUrl(\"testhandle\", \"http://otherdomain.com/PMWebpage.html\");\n\nThe PM.postMessage() function can be called immediately after the PM.preloadUrl() function without waiting.\n\n    PM.postMessage(\"testhandle\", \"test\", {my:\"test\", test:\"is good\"}); //just send data one-way. Url preloaded.\n\nConsiderations\n--------------\n\n1. What happens if the iframe doesn't load? -- An exception will be thrown from PM.postMessage after a few seconds with the message \"PM: \"+handle+\" timed out for action \"+action+\". Data not sent.\".\n\n2. What if PM.js is included twice or if I say \"new PM()\"? -- PM is designed to reuse existing PMs.\n\n3. What happens when an iframe loads? -- The (hidden) iframe renders the page, the PM object is instantiated and notices that it's within a PM iframe, the PM object then sends a \"ready\" response back to the parent website, the parent website hears the response and sets the handle to a \"ready\" state, the parent website can now send the data requests.\n\n4. What about IE, I hear it works differently with postMessage? -- I know. It's been handled. I'm not even happy about it since Microsoft's website even says IE handles objects when it doesn't. Grumble grumble.\n\n5. What browsers does this work with? -- The question should be what doesn't this work with? IE7 and below is not compatible. Most every up-to-date browser is compatible, including Firefox, Chrome, Safari, Android browsers, iOS, IE8+, Opera, etc.\n\nUsing the Sample Code\n=====================\n\nAdd host file entries for pmmain.local and pminner.local.\n\n    sudo nano /etc/hosts\n\nAdd the following:\n\n    127.0.0.1 pmmain.local\n    127.0.0.1 pminner.local\n\nBrowse to the sample directory and start the app using NodeJS.\n\n    cd sample\n    node app.js\n\nOpen your web browser to http://pmmain.local:8888 and open your console to see messages from the inner domain.\n\nDevelopers\n==========\n\nRequirements\n------------\n\n1. nodejs\n2. nvm - in order to match the node version\n\nDevelopment\n--------\n\n1) Open the terminal (or use an IDE that can integrate with nodejs or gulp) and cd to the PM directory.\n\n2) Issue the following command:\n\n\t> npm run watch\n\n3) Open a browser to https://localhost:8000 and review the console.\n","readmeFilename":"README.md"}