facebook url cleaner api and page

Matsukii · Jan 30, 2020 · c186b3d · c186b3d
1 parent 02eb136
commit c186b3d
Show file tree

Hide file tree

Showing 7 changed files with 239 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -26,6 +26,22 @@ The name came from "Polaris", "Escape-pod" and a a bit of 'south/north pole sign
 
 # General usage
 
+## Facebook Url 'cleaner'
+
+Extract original url from facebook links before redirect (any click redrects to facebook(dot)com/l.php, this extract)
+
+```http
+https://polarpod.herokuapp.com/apis/cleanfb?u=[URL]
+```
+
+parameters:
+
+* u: url
+
+response:
+
+* json
+
 ## Og tag getter
 
 ``` http
@@ -213,6 +229,18 @@ _for vimeo thumbails the image size '_640' is replaced by '_1920'_
 
 ```
 
+
+## facebook url 'cleaner'
+
+```json
+  {
+    "original":"some link copied from fb",
+    "clean":"extracted",
+    "timestamp":1580420810267,
+    "success":true
+  }
+```
+
 ## Modules credits
 
 [qrcode-svg by papnkukn](https://github.com/papnkukn/qrcode-svg)

diff --git a/index.js b/index.js
@@ -31,6 +31,9 @@ app.use(express.static('public'));
 app.use(express.static('assets'));
 app.use(express.urlencoded({ extended: true }));
 
+
+
+
 //* call router
 var router = require(`${__dirname}/src/router`) (app, __dirname);
 

diff --git a/public/face-cleaner/cleanfb.css b/public/face-cleaner/cleanfb.css
@@ -0,0 +1,54 @@
+/* code below created colored boxes for any element using bg color */
+/* * { background-color: rgba(255,0,0,.2); }
+* * { background-color: rgba(0,255,0,.2); }
+* * * { background-color: rgba(0,0,255,.2); }
+* * * * { background-color: rgba(255,0,255,.2); }
+* * * * * { background-color: rgba(0,255,255,.2); }
+* * * * * * { background-color: rgba(255,255,0,.2); }
+* * * * * * * { background-color: rgba(255,0,0,.2); }
+* * * * * * * * { background-color: rgba(0,255,0,.2); }
+* * * * * * * * * { background-color: rgba(0,0,255,.2); } */
+
+
+body{
+    /* margin: 0; */
+    background-color: var(--color-backgroud);
+    color: var(--text-dark);
+}
+
+
+.inputs{
+    border: none;
+    border-radius:5px;
+    padding: 5px 10px;
+    font-size: 130%;
+    color: var(--text-dark);
+    background-color: var(--color-tertiary);
+}
+#dataIn{
+    position: absolute;
+    left: 5px;
+    margin-top: -25px;
+    color: var(--color-highlight);
+}
+h1{
+    color: var(--color-highlight);
+}
+
+p[raw]{
+    background: var(--color-tertiary);
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px 0px var(--warn-half);
+}
+
+
+button{
+    border: none;
+    background: var(--warn-half);
+    color: var(--warn-full);
+    padding: 5px 10px;
+    font-size: 100%;
+    border-radius: 5px;
+    margin: 10px;
+}
diff --git a/public/face-cleaner/cleanfb.html b/public/face-cleaner/cleanfb.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og: https://polarpod.herokuapp.com/cleanfb">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Polarpod - Clean facebook links</title>
+    <link rel="stylesheet" href="/face-cleaner/cleanfb.css">
+    <link rel="stylesheet" href="/global.css">
+    <link rel="shortcut icon" href="/logo/app_icon-dark.png" type="image/x-icon">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+
+    <meta property="og:type" content="website">
+    <meta property="og:name" content="Polarpod"/>
+    <meta property="og:site_name" content="Polarpod">
+    <meta property="og:title" content="Facebook URL param cleaner"/>
+    <meta property="og:description" content="Remove fbclid, extract original link from facebook post"/>
+    <meta property="og:url" content="https://polarpod.herokuapp.com/cleanfb"/>
+    <meta property="og:image" content="https://polarpod.herokuapp.com/logo/app_icon-dark.png"/>
+
+</head>
+<!-- konnichiwa sekai -->
+<body class="dark" link="#03A9F4" vlink="#03A9F4">
+    <h1>Facebook url 'cleaner'</h1>
+    <h2>API link: <a href="/apis/cleanfb?u=">https://polarpod.herokuapp.com/apis/cleanfb?u=</a></h2>
+    <h3>Extract original link from facebook post <br>(facebook redirect any link to 'facebook.com/l.php' before <br> go to final link, this api extract the original <br> link from url and remove 'fb click id' <br> its a way to avoid trackers from clicks)</h3>
+    <br>
+    <br>
+    <div id="polar">
+        <label for="dataIn" id="dataIn" v-if="dataIn.length > 0">{{dataLabel}}</label>
+        <input type="text" class="inputs" v-model="dataIn" placeholder="Link to clear">
+
+        <br>
+
+        <h2><a>Discovered:</a></h2>
+        <div id="responsed">
+            <p v-if="dataIn"><b>Original url:</b> <a target="blank" v-bind:href="dataIn">{{dataInCut}}</a></p>
+            <p v-if="dataOut"><b>Cleaned url:</b> <a target="blank" v-bind:href="dataOut">{{dataOut}}</a></p>
+
+            <button v-on:click="showRaw = !showRaw" v-if='false'>How it works</button> <br>
+            <p raw v-if="showRaw && false">
+                This code can be used in browser devTools console <br><br>
+                url = new URL([link_to_clear]) <br>
+                let link = new URL(url.searchParams.get('u'));<br>
+                link = `${link.origin}${link.pathname}`<br>
+            </p>
+
+
+        </div>
+    </div>
+
+
+    <script src="/face-cleaner/cleanfb.js"></script>
+</body>
+</html>
diff --git a/public/face-cleaner/cleanfb.js b/public/face-cleaner/cleanfb.js
@@ -0,0 +1,47 @@
+
+let get;
+let app = new Vue({
+    el:'#polar',
+    data:{
+        apiLink: `https://${window.location.host}/apis/cleanfb?u=`,
+        dataIn: '',
+        dataInCut:'',
+        dataOut: '',
+        dataLabel:'Link to clear',
+        showRaw: false,
+        urlPattern: new RegExp('(http||https):\/\/[0-9a-zA-Z]*.'),
+        res:{
+            original:'',
+            clean:'',
+            timestamp: Date.now(),
+        }
+    },
+    watch:{
+        dataIn(val){
+            if(this.urlPattern.test(val)){
+                if(get){clearTimeout(get)}
+                get = setTimeout(() => {
+                    console.warn("fetching");
+                    this.clearURL(val);
+                }, 500);
+            }
+            else{
+                if(get){clearTimeout(get)}
+            }
+            if(val.length > 20){
+                this.dataInCut = `${this.dataIn.slice(0, 30)}...`
+            }
+        }
+    },
+    methods:{
+        clearURL: async function(url){
+            fetch(`/apis/cleanfb?u=${url}`, {
+                method: 'GET'
+            }).then(r => r.json()).then(r => {
+                app.res = r;
+                this.dataOut = r.clean;
+                console.log(r);
+            })
+        }
+    }
+});
diff --git a/src/face-cleaner.js b/src/face-cleaner.js
@@ -0,0 +1,23 @@
+/**
+ * @description extract original link and remove click id param from facebook links
+ * @author Matsukii
+ * 
+ * @param {String} url url from facebook to clean
+ */
+module.exports = (url) => {
+
+    url = new URL(url);
+
+    if(url.pathname == '/l.php' && url.searchParams.get('u')){
+        let link = new URL(url.searchParams.get('u'));
+        link = `${link.origin}${link.pathname}`
+        return link
+    }
+    else if (url.searchParams.get('fbclid')){
+        return `${url.origin}${url.pathname}`
+    }
+    else{
+        return url;
+    }
+
+};
diff --git a/src/router.js b/src/router.js
@@ -16,25 +16,45 @@ module.exports = (app, dir) => {
     const vidMeta = require('./videoMeta');
     const validUrl = require('valid-url');
     const wordFilter = require('./word-filter');
+    const fbCleanLink = require('./face-cleaner');
 
 
 
     /**
      * @description redirect to project repo
      */
-    app.get('/', (req, res) =>{
-        res.redirect('https://github.com/Matsukii/polarpod');
-    })
+    app.get('/', (req, res) => res.redirect('https://github.com/Matsukii/polarpod'))
 
     // Video 
-    app.get('/video', (req, res) =>{
-        res.status(200).sendFile(`${dir}/public/video/video.html`);
-    })
+    app.get('/video', (req, res) => res.status(200).sendFile(`${dir}/public/video/video.html`))
 
     // Open graph
-    app.get('/ogtags', (req, res) =>{
-        res.status(200).sendFile(`${dir}/public/openGraph/ogs.html`);
-    })
+    app.get('/ogtags', (req, res) => res.status(200).sendFile(`${dir}/public/openGraph/ogs.html`) )
+
+    // clean facebook url
+    app.get('/cleanfb', (req, res) => res.status(200).sendFile(`${dir}/public/face-cleaner/cleanfb.html`))
+
+    //* clean facebook url api
+    app.get('/apis/cleanfb', (req, res) => {
+        let url = req.query.u;
+        if(!url){return res.status(400).send('No params sended')}
+        try {
+            return res.status(200).json({
+                original: url,
+                clean: fbCleanLink(url),
+                timestamp: Date.now(),
+                success: true
+            });
+        } catch (e) {
+            return res.status(500).send({
+                original: url,
+                clean: '',
+                timestamp: Date.now(),
+                success: false
+            })
+        }
+    });
+
 
     /**
      * @description og tag getter