Ajax for "load on scroll" script delivers 403

Question

I'm building a blog on the hubspot cos. We want the blog posts to load on scroll. I found a script that states that it does this and is specifically for Hubspot.

That being said, I'm getting a 403 in the console when I activate the script by scrolling. I don't think this is a hubspot issue as much as an Ajax issue.

The script I am using: www.uvm .edu/~enewbury/swoosh/

The script on our hubspot cdn: http://cdn2.hubspot.net/hub/1739321/hub_generated/template_assets/1452520555218/custom/page/JS/Swoosh.min.js

The blog: http://insights.signetaccel.com/blog

The only thing that sticks out to me is that the ajax request is cross domain, but this is a normal thing in hubspot between files and the company domain so if this script was built for use in hubspot I would think the owner would have accounted for this.

I've looked all of for an answer, and I've come up empty handed. It should be noted that a php proxy wouldn't work as server side programming is not an option with hubspot.

I would really appreciate some an answer or some tips on what to do here.

$(document).ready(function(){
        $(".grid").swoosh();
    });



(function(a) {
a.fn.swoosh = function(f, k) {
    if (!f) {
        f = "Loading..."
    }
    if (k == null) {
        k = -1
    }
    var c = this;
    var e = false;
    var j = 2;
    var d = window.location.href.toString().split("/");
    var i = d[0] + "//" + d[2] + "/" + d[3] + "/";
    var h = i + "page/";
    var g = "";
    var b = false;
    if (f != "Loading...") {
        c.parent().append('<div class="loading"><img src="' + f + '"></div>')
    } else {
        c.parent().append('<div class="loading">' + f + "</div>")
    }
    a(".loading").hide();
    a(document).scroll(function() {
        if (b || e || j == 0) {
            return false
        }
        if (a(window).scrollTop() >= a(document).height() - a(window).height() - a(".footer-container-wrapper").height() - 150) {
            b = true;
            a(".loading").fadeIn(200);
            g = h + j;
            a.post(g, function(m) {
                var l = a(m).find(".grid-item");
                      if (l.length) {
                          console.log(f);
                            a(".loading").fadeOut(200, function() {
                             l.appendTo(".grid")
                        });
                        j++;
                         a(".next-posts-link").attr("href", h + j)
                     } else {
                         e = true;
                         a(".next-posts-link").after('<div class="next-posts-link unactive">Next</div>');
                         a(".next-posts-link:not(.unactive)").remove();
                        a(".loading").fadeOut(200)
                        }
                        b = false;
                        setTimeout(function() {
                        twttr.widgets.load();
                        IN.parse();
                        FB.XFBML.parse();
                        gapi.plusone.go()
                    }, 350)
                })
             }
        })
    }
})(jQuery);
(function() {
    return window.SIG_EXT = {};
})()

Answer 1

TL;DR -- You're getting a 403 because the script is using jQuery's .post instead of .get; an http POST to a HubSpot COS/blog page is not allowed. This appears in line 45 of the raw js example here: http://www.uvm.edu/~enewbury/swoosh/swoosh.js

Switch out the HTTP method for a GET, then continue debugging. The script is unofficial and, though intended to be generic, relies on specific body structure generated by HubSpot's COS/blog and classing of elements. More debugging may be required to get it working.

---

Details: The way this script works is a bit kludgey. Its not fetching blog content from an API or other efficient resource -- instead, it grabs the full HTML of /page/2, /page/3, etc as you scroll, parsing out the blog post HTML from the response it retrieves, and injecting the posts it finds in the async fetch into the current page.

Using a POST rather than a GET to fetch this content is generating a 403 Forbidden.

There may be more issues as the script depends very much on certain elements being classed a specific way, but this fixes your immediate 403 issue.