{"id":13565476,"url":"https://github.com/john-doherty/node-iframe-replacement","last_synced_at":"2025-04-23T18:51:57.785Z","repository":{"id":60147178,"uuid":"77738700","full_name":"john-doherty/node-iframe-replacement","owner":"john-doherty","description":"An alternative to sticking that lovely web app into an \u003ciframe\u003e on a corp website","archived":false,"fork":false,"pushed_at":"2021-12-24T06:21:34.000Z","size":740,"stargazers_count":50,"open_issues_count":4,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-21T12:58:10.088Z","etag":null,"topics":["express-middleware","expressjs","iframe","nodejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/john-doherty.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-31T12:07:32.000Z","updated_at":"2025-03-17T08:51:55.000Z","dependencies_parsed_at":"2022-09-25T21:36:49.906Z","dependency_job_id":null,"html_url":"https://github.com/john-doherty/node-iframe-replacement","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/john-doherty%2Fnode-iframe-replacement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/john-doherty%2Fnode-iframe-replacement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/john-doherty%2Fnode-iframe-replacement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/john-doherty%2Fnode-iframe-replacement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/john-doherty","download_url":"https://codeload.github.com/john-doherty/node-iframe-replacement/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250496292,"owners_count":21440227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express-middleware","expressjs","iframe","nodejs"],"created_at":"2024-08-01T13:01:47.835Z","updated_at":"2025-04-23T18:51:57.727Z","avatar_url":"https://github.com/john-doherty.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# node-iframe-replacement\n[![Shippable branch](https://img.shields.io/shippable/5869721607d5371300747182/master.svg)](https://app.shippable.com/projects/5869721607d5371300747182) [![npm](https://img.shields.io/npm/dt/node-iframe-replacement.svg)](https://www.npmjs.com/package/node-iframe-replacement) \n\n## Motivation\nImagine the scenario: you've built a lovely web app for a business, who later insists it goes live within an iframe of their corp website. You resist, but you're ultimatley forced to bastardize your app to make it work. \n\n[node-iframe-replacement](https://github.com/john-doherty/node-iframe-replacement) is the compromise. A small node server that grabs the source code of an external website and injects your content - thus allowing you to host your app on a subdomain and without an iframe. Changes to the external site _(navigation etc)_ are automatically picked up every 5 minutes and reflected in your app.\n\nYou can now argue that your web app can remain synced with the corperate website look/feel without an iframe.\n\n\n## Installation\n\n```bash\n$ npm install --save node-iframe-replacement\n```\n\n## Usage\n\n### Example server\n\nThe example below will request the [BBC News](http://www.bbc.co.uk/news) home page and replace the contents of **div[data-entityid=\"container-top-stories#1\"]** with the contents of our fake-news view:\n\n_express logic excluded to improve readability, you can view the full example implementation [here](example/server.js)_\n\n```js\nvar iframeReplacement = require('node-iframe-replacement');\n\n// add iframe replacement to express as middleware (adds res.merge method)\napp.use(iframeReplacement);\n\n// create a regular express route\napp.get('/', function(req, res){\n\n    // respond to this request with our fake-news content embedded within the BBC News home page\n    res.merge('fake-news', {\n        // external url to fetch\n       sourceUrl: 'http://www.bbc.co.uk/news',\n       // css selector to inject our content into\n       sourcePlaceholder: 'div[data-entityid=\"container-top-stories#1\"]',\n       // pass a function here to intercept the source html prior to merging\n       transform: null\n    });\n});\n```\n\nIf you pass a function as the transform property ```transform: function($, model) {}``` - the function will be called prior to rendering, allowing you to inject title tags, html attributes etc.\nThe `$` passed to your transform method is a JQuery like object using [cheerio](https://github.com/cheeriojs/cheerio#cheerio), removing the need to parse strings.\n\n### Example fake-news html\n\n```html\n\u003cdiv style=\"margin: 0 0 0 20px; overflow: auto;\"\u003e\n    \u003cdiv style=\"width: 210px; float: left;\"\u003e\n        \u003ca href=\"https://github.com/john-doherty/node-iframe-replacement\" target=\"_blank\"\u003e\n            \u003ch3 style=\"color: #222; font-size: 32px; font-weight: bold; margin: 0 0 10px 0;\"\u003eiframe replacement Node.js module lanuched\u003c/h3\u003e\n        \u003c/a\u003e\n        \u003cp style=\"padding: 0; font-size: 14px;line-height: 22px\"\u003e\n            Open source project not only has the potential to replace iframes, but also brings a whole new meaning to the concept of fake news.\n        \u003c/p\u003e\n    \u003c/div\u003e\n    \u003cimg src=\"https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/nodejs-frameworks.png\" alt=\"Node js logo\" style=\"width: 500px; float: right;\"/\u003e\n\u003c/div\u003e\n```\n\n### Example input\n\n![alt text](docs/bbc-news-actual-homepage.png \"BBC News actual homepage\")\n\n### Example output\n\n![alt text](docs/bbc-news-fake-homepage.png \"BBC News actual homepage\")\n\n### Run the example\n\nYou can try the example for yourself using the following commands:\n\n```bash\ngit clone https://github.com/john-doherty/node-iframe-replacement\ncd node-iframe-replacement\nnpm install\nnpm start\n```\n\nThen visit [http://localhost:8080](http://localhost:8080) in your browser.\n\n## Auto base tag injection\n\nTo ensure the source scripts, styles and images load within your site a base tag is automatically injected ```\u003cbase href=\"http://www.bbc.co.uk/news\" /\u003e```.\n\nBecause of this, you need to ensure all the links within your conent are absolute.\n\n## Contributing\n\nEveryone is  welcome to contribute to this project. You can contribute just by submitting bugs or suggest improvements by [opening an issue](https://github.com/john-doherty/node-iframe-replacement/issues) on GitHub.\n\n## History\n\nThis project is a rethought, rebranded, relaunched version of my badly named [express-render-template](https://www.npmjs.com/package/express-render-template) module released in Arpil 2016.\n\n## License\n\nLicensed under [ISC License](LICENSE) \u0026copy; [John Doherty](https://twitter.com/MrJohnDoherty)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohn-doherty%2Fnode-iframe-replacement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohn-doherty%2Fnode-iframe-replacement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohn-doherty%2Fnode-iframe-replacement/lists"}