Developing for Splunk Enterprise
Highlighted

Splunk JS Stack not working from external web page.

Explorer

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>
Labels (2)
Highlighted

Re: Splunk JS Stack not working from external web page

Ultra Champion

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.
0 Karma
Highlighted

Re: Splunk JS Stack not working from external web page

Explorer

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..

0 Karma
Highlighted

Re: Splunk JS Stack not working from external web page

Ultra Champion

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

0 Karma
Highlighted

Re: Splunk JS Stack not working from external web page

Explorer

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
0 Karma
Highlighted

Re: Splunk JS Stack not working from external web page

Ultra Champion

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.

0 Karma
Highlighted

Re: Splunk JS Stack not working from external web page

Explorer

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.

0 Karma
Highlighted

Re: Splunk JS Stack not working from external web page

Ultra Champion

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.

0 Karma
Highlighted

Re: Splunk JS Stack not working from external web page

Ultra Champion

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.

0 Karma
Highlighted

Re: Splunk JS Stack not working from external web page

Ultra Champion

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

0 Karma