Splunk JS Stack not working from external web page...

friscos · ‎09-30-2016

Hi, I am trying very hard to embed Splunk in an external webpage using Splunk JavaScript stack but no luck so far.

I am trying a very simple example from here http://dev.splunk.com/view/SP-CAAAEWS

Anyone had luck connecting to splunk from external webpages using SplunkJS?

The difference from the example and my environment are Proxy and Scheme My environment is not https and there is no proxy.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Login Tests</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css"/>
    <style type="text/css">
        .fail{
            color: red;
        }
        .main-area {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div class="main-area">
        <h2>Login Form</h2>
        <p>This page tests login and authentication. When you enter a 
            name and password, these credentials are used to log in 
            to Splunk.</p>
        <p>If login is successful, a session key is returned and stored 
            in a cookie, along with the username. Then, you are redirected 
            to another page that uses the same session key.</p>
        &lt;br/&gt;
        <p><b>Username:</b></p>
        <input id="usernamebox" type="text" value="admin">
        <p><b>Password:</b></p>
        <input id="pwbox" type="password" value="mypassword">
        &lt;br/&gt;
        <button class="btn" onclick="onLogin()">Log in</button>
        &lt;br/&gt;
        <div id="errorText"></div>
    </div>

    <script src="static/splunkjs/config.js"></script>

    <script>
        // Set the web site's base URL
        require.config({
            baseUrl: "/static"
        });

        // Log In button function
        function onLogin() {
            alert("Inside OnLogin");
            require([
                "jquery",
                "splunkjs/splunk",
            ], function($, jssdk) {
                alert('Inside Login');
                // Get the username and passwords
                var username = $("#usernamebox").val();
                var password = $("#pwbox").val();

                // Use the Splunk SDK for JavaScript to log in to Splunk

                // Create a Service object
                var http =  new jssdk.ProxyHttp("/proxy");
                var service = new jssdk.Service(http, {
                    username: username,
                    password: password,
                    scheme: "http",
                    host: "splunkdev", 
                    port: 8000
                });

                // Log in to Splunk
                service.login(function(err) {
                    alert('Inside Service Login');
                    // The session key and username are required for logging in
                    if (!err) {
                        var key = service.sessionKey;
                        // Save the session key and username in cookies
                        $.cookie("splunk_sessionkey", key);
                        $.cookie("splunk_username", username);

                        // Redirect to another page
                        window.location.href = "login_verify.html";  
                    }
                    else {
                        alert('Login Failed');
                        $("#errorText").empty().append("<p class='fail'>&lt;br/&gt;Login failed! See the console for error info.</p>");
                        console.error("Login failed: ", err);
                    }              
                });
            });
        }   
    </script>
</body>
</html>

sloshburch · ‎10-24-2016

Did a webex and discovered that this was not working because of the browsers security policies around Same Origin Policy. We verified this by running the node.exe that comes with the SDK and connecting to a local splunk install successfully.

@friscos is now attempting http://www.thegeekstuff.com/2016/09/disable-same-origin-policy/ to allow his browser to connect to his remote Splunk instance.

Obviously the final solution must contain a proxy on the webserver to address this browser restriction in production.

sloshburch · ‎11-01-2016

Update from our webex: The javascript SDK comes with a node server that can abstract the cross domain challenge. It's actually all explained in the dev docs @ http://dev.splunk.com/view/javascript-sdk/SP-CAAAEWQ

AshChakor · ‎04-30-2019

Hi SloshBurch ,
I followed all the examples and its working fine with the node server.
How do I configure it on IIS server to work as a Proxy for connecting to Splunk Web from outside? Can you please share settings on IIS server, if i need to add proxy-pass in web.conf, if there is any snippet that you can share?

Thanks in advance.

sloshburch · ‎06-07-2019

@AshChakor - My memory is failing me now (the rest of the thread was three years ago) . I can't speak to how to set it up on IIS (not my background). When I navigate to the web.conf spec file and search for proxy a number of settings are discovered. Although maybe your best luck will come from one of these pages: https://docs.splunk.com/Special:SplunkSearch/docs?q=proxy

Sorry I can't be of more help here. Feel free to post a new question with your specifics to get more attention to your needs. Or a support ticket of course. Lastly, your account team might be able to provide more guidance.

Sorry, I wish I was smarter 😞

sloshburch · ‎10-21-2016

FYI. Splunk SDK for JavaScript version 1.8.1 was just released. Not sure if it addresses anything here but I wanted to let you know.

sloshburch · ‎10-18-2016

Remember that the SDKs use the splunkd REST endpoints.

You should see that the management interface in Splunk (also known as splunkd) is 8089 by default. In your example, you changed the port to 8000 which is likely the default web port. That will not work. This must connect to the management interface port.
I'm not sure you need the "/proxy" since there is no Splunk endpoint that uses that. I'll see if a peer can confirm.
The scheme needs to be https. Even though splunkweb is http, you're connecting to splunkd which is https by default. I highly doubt you went through the effort of disabling (if even possible) the splunkd https connection.

friscos · ‎10-18-2016

Hi Burch,

I tried with https, 8089 port but no luck. I in fact tried all the combinations before posting it in the forum. I ran out of options now..

sloshburch · ‎10-19-2016

What was the error when you used https, 8089, and no '/proxy'? Please also include the error message that appeared in $SPLUNK_HOME/var/log/splunk/splunkd.log

friscos · ‎10-19-2016

Hi Burch,

I do not see the request reaching the server. There is no request information logged in splunkd.log.

I am not able to attach screenshots. here are the error messages:

Code Snippet (with /proxy and https):

<script>
 splunkjs.config({
        proxyPath: '/proxy',
        scheme: 'https',
        host: 'splunkdev.com',
        port: 8089,
        authenticate: {username: 'admin', password: 'test123'}
    });
</script>

Error message on js console:

mvc.js:8819 POST http://localhost:6080/proxy/services/auth/login?output_mode=json 404 (Not Found)send @ mvc.js:8819ajax @ mvc.js:8249makeRequest @ mvc.js:24517request @ mvc.js:20231(anonymous function) @ mvc.js:19028post @ mvc.js:20166(anonymous function) @ mvc.js:19028login @ mvc.js:19746(anonymous function) @ mvc.js:19028authFunction @ mvc.js:70615loginLoad @ mvc.js:70634(anonymous function) @ mvc.js:70429execCb @ config.js:1636check @ config.js:872enable @ config.js:1143init @ config.js:780(anonymous function) @ config.js:1413
config.js:139 Uncaught Error: Login failed. Authenticate(done) received an error(anonymous function) @ mvc.js:70636(anonymous function) @ mvc.js:70617wrappedCallback @ mvc.js:19738wrappedCallback @ mvc.js:20212error @ mvc.js:24506(anonymous function) @ mvc.js:70831fire @ mvc.js:3161fireWith @ mvc.js:3273done @ mvc.js:8350callback @ mvc.js:8891


Code Snippet (with out proxy):

<script>
 splunkjs.config({
        proxyPath: '/',
        scheme: 'https',
        host: 'splunkdev.com',
        port: 8089,
        authenticate: {username: 'admin', password: 'test123'}
    });
</script>

Error message on js console:

config.js:164 Uncaught Error: Load timeout for modules: splunkjs/ready!_unnormalized2,splunkjs/ready!
http://requirejs.org/docs/errors.html#timeoutmakeError @ config.js:164checkLoaded @ config.js:690(anonymous function) @ config.js:711
mvc.js:8819 OPTIONS http://services/auth/login?output_mode=json net::ERR_CONNECTION_TIMED_OUTsend @ mvc.js:8819ajax @ mvc.js:8249makeRequest @ mvc.js:24517request @ mvc.js:20231(anonymous function) @ mvc.js:19028post @ mvc.js:20166(anonymous function) @ mvc.js:19028login @ mvc.js:19746(anonymous function) @ mvc.js:19028authFunction @ mvc.js:70615loginLoad @ mvc.js:70634(anonymous function) @ mvc.js:70429execCb @ config.js:1636check @ config.js:872enable @ config.js:1143init @ config.js:780(anonymous function) @ config.js:1413
config.js:139 Uncaught Error: Login failed. Authenticate(done) received an error

sloshburch · ‎10-20-2016

So the first example shows a 404 (with proxy) so you're trying to reach something that's not there.

If this is on your local, why are you using splunkdev.com? Why not localhost?

In the second, I see the url after OPTIONS shows http://services/auth/login?output_mode=json. I'm confused why the host:port portion is missing.

The url that it should end up calling should be like:
https://localhost:8089/services/auth/login?output_mode=json
Notice the:

https
use of localhost
port 8089, not 8000 and not 6080
no /proxy

You can validate this is the endpoint on your system by navigating to https://localhost:8089/services/auth/login in your web browser.

friscos · ‎10-21-2016

Burch,

localhost and 6080 is the hostname and port number of my local tomcat server. splunkdev and 8089 are the server hostname and port number.

Splunk JS Stack not working from external web page.

Splunk Web Framework

SplunkJS

Announcing the Expansion of the Splunk Academic Alliance Program

Learn Splunk Insider Insights, Do More With Gen AI, & Find 20+ New Use Cases You Can ...

Buttercup Games: Further Dashboarding Techniques (Part 7)