SlideShare ist ein Scribd-Unternehmen logo
1 von 66
Remixing Confluence with
Speakeasy



Nabeelah Ali
Atlassian

                           2
Show of hands
Written a Confluence plugin?




                               3
Show of hands
Comfortable with Javascript?




                               4
Show of hands
Enjoy memes?




                5
About me
Nabeelah Ali
Confluence developer
 on 4.0 frontend features




                            6
Confluence 4
• new features
• diverse users




                  7
“   Be the change you seek.
                              ”
                     Atlassian value




                                       8
9
In case you were wondering
• ragefaces is really an extension




         BEFORE                      AFTER




                                             10
I can haz plugin?
an atlassian-plugin.xml
<atlassian-plugin name="Ragefaces resource" key="example.plugin.ragefaces" plugins-
version="2">
    <plugin-info>
        <description>A plugin to turn your [/awyeah]s into images</description>
        <vendor name="Meme Corporation" url="http://www.memecorp.us"/>
        <version>1.0</version>
    </plugin-info>

    <web-resource name="Resources" key="resources">
          <resource name="foo.js" type="download" location="resources/foo.js"/>
          <context>atl.general</context>
    </web-resource>

</atlassian-plugin>




                                                                                      11
Creating a Confluence plugin




                               12
Creating a Confluence plugin




                               13
Creating a Confluence plugin



        run -> debug -> run


                               14
Creating a Confluence plugin



        run -> debug -> run


                               15
Creating a Confluence plugin



        run -> debug -> run


                               16
Creating a Confluence plugin



        run -> debug -> run


                               17
What you will hear today
• Speakeasy 101
• Techniques for remixing Confluence (show & tell)
• Letʼs build an extension
• Cautionary Advice



                                                     18
Speakeasy
Speakeasy: the what
• cross-product plugin
• run client-side Javascript, CSS & HTML




                                           20
for plugin developers


                        super fast
                        prototyping




                                      23
for confluence admins



                 try out crazy stuff
                 on production data




                                       24
for confluence admins


                       user-driven
                       development




                                     25
for confluence admins



                  democratise
                  development




                                26
Speakeasy: got Confluence?
Atlassian Plugin SDK
 --atlas-run-standalone --product confluence --version 4.0




                                                             27
29
30
31
32
Technique
s
Let’s build this thing
1. Include the image
2. Restrict the context
3. Find/replace
4. Twitter request
5. Put it in a dialog


                          36
Include the image
var img =
    require('speakeasy/resources').getImageUrl(module, 'bird.png');




                                                                      37
Let’s do this all onready

$(document).ready(function() {
  // we’ll put our code here
}




                                 38
You have access to
• almost everything is namespaced under AJS
• AJS.$               [jQuery]




                                              39
You have access to
• almost everything is namespaced under AJS
• AJS.$                        [jQuery]
• AJS.Meta
   AJS.Meta.getAllAsMap()

   AJS.Meta.get(“space-key”)




                                              40
Restrict the context
   if (!!AJS.Meta.get("page-id") &&
      !AJS.Meta.get("editor-mode")) {
     // do our stuff
   }




                                        41
atlassian   atlassian




Confluencep ages
viewing a page/blog       editing a page/blog                    dashboard
breadcrumbs                breadcrumbs                           breadcrumbs

  title                     title                                Welcome to Confluence    Updates
   content
                            content




                                                                  Spaces




                                                      SAVE
              atlassian                                                           atlassian




                                                                                                    42
Find & replace
  var content = AJS.$("#main-content");

  var twitterfiedContent = content.html().replace(/(^|s)#(w+)/g, "
     $1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>
     <img src='"+ img + "' class='twittericon' hashtag='$2'/>");

  content.html(twitterfiedContent);




                                                                       43
Twitter request
      $.getJSON("http://search.twitter.com/search.json?callback=?", {
       q: "#" + id,
       rpp: "5",
       lang: "en"
       }, function(data) {
          $.each(data.results, function() {
             // Put each result’s twitter handle, tweet text and user
             //profile photo in nice divs and style.      
           });
       });
   




                                                                        44
Twitter request
      $.getJSON("http://search.twitter.com/search.json?callback=?", {
       q: "#" + id,
       rpp: "5",
       lang: "en"
       }, function(data) {
          $.each(data.results, function() {
             // Put each result’s twitter handle, tweet text and user
             //profile photo in nice divs and style.      
           });
       });
   




                                                                        45
Atlassian User Interface (AUI)
• a reusable set of UI components




                                    46
Put it in a dialog
    AJS.InlineDialog($(this), 1, function(content, trigger, showPopup) {


    },  {onHover:true});




                                                                           47
Put it in a dialog
    AJS.InlineDialog($(this), 1, function(content, trigger, showPopup) {

      var tweets = AJS.$("<div></div>").attr("id", "tweets");
      $.getJSON("http://search.twitter.com/search.json?callback=?", {q: "#" + id, rpp: "5",
lang: "en"}, function(data) {
        $.each(data.results, function() {
           // Assemble results into a tweets div.
        });
       
        $(content).html(tweets);
       showPopup();
       });
    },  {onHover:true});




                                                                                              48
THE TWEETINATOR




                  49
Cautionary advice
Breaking things
• Unsubscribe & restore URLs
   yourinstance/plugins/servlet/speakeasy/unsubscribe

   yourinstance/plugins/servlet/speakeasy/restore




                                                        51
Breaking things
Feedback




                  52
Breaking things




                  53
Should you use it?
• Do you trust your users?
• Does your instance allow public signup?




                                            54
Cross-site scripting
• inserting unescaped HTML into the page
 • from user input
 • from data you fetched




                                           55
XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');
    




                                             56
XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');

el.innerHTML = result;




                                             57
XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');

el.innerHTML = result;                       // BAD - Don’t do this!




                                                                       58
XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');

el.innerHTML = result;                       // BAD - Don’t do this!


el.innerHTML = AJS.escapeHtml(result);       // Do this instead.




                                                                       59
XSS Example
var result = "<script>alert();</script>";
var el = document.getElementById('myDiv');

el.innerHTML = result;                       // BAD - Don’t do this!


el.innerHTML = AJS.escapeHtml(result);       // Do this instead.
AJS.$(el).text(result);                      // Or this.




                                                                       60
Interested in learning more?
Securing your Plugin - Penny Wyatt @ AtlasCamp 2010

               Protip If you weren’t here last year or
               just enjoy nostalgia, check out the
               Atlascamp 2010 website for videos
               of every session.




                                                         61
Where can you go from here?
Product Compatibility

• Speakeasy documentation
• Extension repository
• Remember: not just Confluence!




                                   63
Resources
Speakeasy Documentation
https://developer.atlassian.com/display/SPEAK/Speakeasy
Speakeasy Source on github
https://github.com/mrdon/speakeasy-plugin
Speakeasy JARs
https://maven.atlassian.com/content/repositories/atlassian-public/com/atlassian/labs/speakeasy-plugin/




                                                                                                         64
TAKE-AWAYS




“   Got an hour to spare? That’s enough time to

                                                     ”
    prototype a new Confluence feature with Speakeasy.




     #atlascamp


                                                         65
Thank you!

Weitere ähnliche Inhalte

Was ist angesagt?

Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
Remy Sharp
 
The Best (and Worst) of Django
The Best (and Worst) of DjangoThe Best (and Worst) of Django
The Best (and Worst) of Django
Jacob Kaplan-Moss
 
TurboGears2 Pluggable Applications
TurboGears2 Pluggable ApplicationsTurboGears2 Pluggable Applications
TurboGears2 Pluggable Applications
Alessandro Molina
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Chris Alfano
 
深入淺出 MVC
深入淺出 MVC深入淺出 MVC
深入淺出 MVC
Jace Ju
 

Was ist angesagt? (20)

Wordpress Beyond Websites
Wordpress Beyond WebsitesWordpress Beyond Websites
Wordpress Beyond Websites
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
RicoLiveGrid
RicoLiveGridRicoLiveGrid
RicoLiveGrid
 
Implement rich snippets in your webshop
Implement rich snippets in your webshopImplement rich snippets in your webshop
Implement rich snippets in your webshop
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
Contributing to WordPress Core - Peter Wilson
Contributing to WordPress Core - Peter WilsonContributing to WordPress Core - Peter Wilson
Contributing to WordPress Core - Peter Wilson
 
Django Heresies
Django HeresiesDjango Heresies
Django Heresies
 
BP-6 Repository Customization Best Practices
BP-6 Repository Customization Best PracticesBP-6 Repository Customization Best Practices
BP-6 Repository Customization Best Practices
 
Django - 次の一歩 gumiStudy#3
Django - 次の一歩 gumiStudy#3Django - 次の一歩 gumiStudy#3
Django - 次の一歩 gumiStudy#3
 
The Best (and Worst) of Django
The Best (and Worst) of DjangoThe Best (and Worst) of Django
The Best (and Worst) of Django
 
TurboGears2 Pluggable Applications
TurboGears2 Pluggable ApplicationsTurboGears2 Pluggable Applications
TurboGears2 Pluggable Applications
 
JavaFX 2 and Scala - Like Milk and Cookies (33rd Degrees)
JavaFX 2 and Scala - Like Milk and Cookies (33rd Degrees)JavaFX 2 and Scala - Like Milk and Cookies (33rd Degrees)
JavaFX 2 and Scala - Like Milk and Cookies (33rd Degrees)
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
 
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
 
深入淺出 MVC
深入淺出 MVC深入淺出 MVC
深入淺出 MVC
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
Let's write secure Drupal code! DUG Belgium - 08/08/2019
Let's write secure Drupal code! DUG Belgium - 08/08/2019Let's write secure Drupal code! DUG Belgium - 08/08/2019
Let's write secure Drupal code! DUG Belgium - 08/08/2019
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
 
Moving from Django Apps to Services
Moving from Django Apps to ServicesMoving from Django Apps to Services
Moving from Django Apps to Services
 
Hooks WCSD12
Hooks WCSD12Hooks WCSD12
Hooks WCSD12
 

Ähnlich wie Remixing Confluence With Speakeasy

Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
Bob Paulin
 
Ako prepojiť aplikáciu s Elasticsearch
Ako prepojiť aplikáciu s ElasticsearchAko prepojiť aplikáciu s Elasticsearch
Ako prepojiť aplikáciu s Elasticsearch
bart-sk
 

Ähnlich wie Remixing Confluence With Speakeasy (20)

AtlasCamp 2011: Confluence 4 and Beyond
AtlasCamp 2011: Confluence 4 and BeyondAtlasCamp 2011: Confluence 4 and Beyond
AtlasCamp 2011: Confluence 4 and Beyond
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 
WebGUI Developers Workshop
WebGUI Developers WorkshopWebGUI Developers Workshop
WebGUI Developers Workshop
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
 
Sprockets
SprocketsSprockets
Sprockets
 
Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
 
The JavaFX Ecosystem
The JavaFX EcosystemThe JavaFX Ecosystem
The JavaFX Ecosystem
 
Burn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websitesBurn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websites
 
Revoke-Obfuscation
Revoke-ObfuscationRevoke-Obfuscation
Revoke-Obfuscation
 
vJUG - The JavaFX Ecosystem
vJUG - The JavaFX EcosystemvJUG - The JavaFX Ecosystem
vJUG - The JavaFX Ecosystem
 
Terraform 101
Terraform 101Terraform 101
Terraform 101
 
Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...Learning jQuery made exciting in an interactive session by one of our team me...
Learning jQuery made exciting in an interactive session by one of our team me...
 
Advanced Topics in Continuous Deployment
Advanced Topics in Continuous DeploymentAdvanced Topics in Continuous Deployment
Advanced Topics in Continuous Deployment
 
"I have a framework idea" - Repeat less, share more.
"I have a framework idea" - Repeat less, share more."I have a framework idea" - Repeat less, share more.
"I have a framework idea" - Repeat less, share more.
 
Neo4j Stored Procedure Training Part 1
Neo4j Stored Procedure Training Part 1Neo4j Stored Procedure Training Part 1
Neo4j Stored Procedure Training Part 1
 
Ako prepojiť aplikáciu s Elasticsearch
Ako prepojiť aplikáciu s ElasticsearchAko prepojiť aplikáciu s Elasticsearch
Ako prepojiť aplikáciu s Elasticsearch
 
Infrastructure-as-code: bridging the gap between Devs and Ops
Infrastructure-as-code: bridging the gap between Devs and OpsInfrastructure-as-code: bridging the gap between Devs and Ops
Infrastructure-as-code: bridging the gap between Devs and Ops
 
Having Fun with Play
Having Fun with PlayHaving Fun with Play
Having Fun with Play
 

Kürzlich hochgeladen

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Kürzlich hochgeladen (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

Remixing Confluence With Speakeasy

  • 1.
  • 3. Show of hands Written a Confluence plugin? 3
  • 4. Show of hands Comfortable with Javascript? 4
  • 6. About me Nabeelah Ali Confluence developer on 4.0 frontend features 6
  • 7. Confluence 4 • new features • diverse users 7
  • 8. Be the change you seek. ” Atlassian value 8
  • 9. 9
  • 10. In case you were wondering • ragefaces is really an extension BEFORE AFTER 10
  • 11. I can haz plugin? an atlassian-plugin.xml <atlassian-plugin name="Ragefaces resource" key="example.plugin.ragefaces" plugins- version="2"> <plugin-info> <description>A plugin to turn your [/awyeah]s into images</description> <vendor name="Meme Corporation" url="http://www.memecorp.us"/> <version>1.0</version> </plugin-info> <web-resource name="Resources" key="resources"> <resource name="foo.js" type="download" location="resources/foo.js"/> <context>atl.general</context> </web-resource> </atlassian-plugin> 11
  • 14. Creating a Confluence plugin run -> debug -> run 14
  • 15. Creating a Confluence plugin run -> debug -> run 15
  • 16. Creating a Confluence plugin run -> debug -> run 16
  • 17. Creating a Confluence plugin run -> debug -> run 17
  • 18. What you will hear today • Speakeasy 101 • Techniques for remixing Confluence (show & tell) • Letʼs build an extension • Cautionary Advice 18
  • 20. Speakeasy: the what • cross-product plugin • run client-side Javascript, CSS & HTML 20
  • 21.
  • 22.
  • 23. for plugin developers super fast prototyping 23
  • 24. for confluence admins try out crazy stuff on production data 24
  • 25. for confluence admins user-driven development 25
  • 26. for confluence admins democratise development 26
  • 27. Speakeasy: got Confluence? Atlassian Plugin SDK --atlas-run-standalone --product confluence --version 4.0 27
  • 28.
  • 29. 29
  • 30. 30
  • 31. 31
  • 32. 32
  • 34.
  • 35.
  • 36. Let’s build this thing 1. Include the image 2. Restrict the context 3. Find/replace 4. Twitter request 5. Put it in a dialog 36
  • 37. Include the image var img = require('speakeasy/resources').getImageUrl(module, 'bird.png'); 37
  • 38. Let’s do this all onready $(document).ready(function() { // we’ll put our code here } 38
  • 39. You have access to • almost everything is namespaced under AJS • AJS.$ [jQuery] 39
  • 40. You have access to • almost everything is namespaced under AJS • AJS.$ [jQuery] • AJS.Meta AJS.Meta.getAllAsMap() AJS.Meta.get(“space-key”) 40
  • 41. Restrict the context if (!!AJS.Meta.get("page-id") && !AJS.Meta.get("editor-mode")) { // do our stuff } 41
  • 42. atlassian atlassian Confluencep ages viewing a page/blog editing a page/blog dashboard breadcrumbs breadcrumbs breadcrumbs title title Welcome to Confluence Updates content content Spaces SAVE atlassian atlassian 42
  • 43. Find & replace   var content = AJS.$("#main-content");   var twitterfiedContent = content.html().replace(/(^|s)#(w+)/g, " $1#<a href="http://search.twitter.com/search?q=%23$2">$2</a> <img src='"+ img + "' class='twittericon' hashtag='$2'/>");   content.html(twitterfiedContent); 43
  • 44. Twitter request       $.getJSON("http://search.twitter.com/search.json?callback=?", { q: "#" + id, rpp: "5", lang: "en" }, function(data) {    $.each(data.results, function() {    // Put each result’s twitter handle, tweet text and user //profile photo in nice divs and style.                }); });     44
  • 45. Twitter request       $.getJSON("http://search.twitter.com/search.json?callback=?", { q: "#" + id, rpp: "5", lang: "en" }, function(data) {    $.each(data.results, function() {    // Put each result’s twitter handle, tweet text and user //profile photo in nice divs and style.                }); });     45
  • 46. Atlassian User Interface (AUI) • a reusable set of UI components 46
  • 47. Put it in a dialog     AJS.InlineDialog($(this), 1, function(content, trigger, showPopup) {     },  {onHover:true}); 47
  • 48. Put it in a dialog     AJS.InlineDialog($(this), 1, function(content, trigger, showPopup) {       var tweets = AJS.$("<div></div>").attr("id", "tweets");       $.getJSON("http://search.twitter.com/search.json?callback=?", {q: "#" + id, rpp: "5", lang: "en"}, function(data) {         $.each(data.results, function() { // Assemble results into a tweets div.         });         $(content).html(tweets);        showPopup();        });     },  {onHover:true}); 48
  • 51. Breaking things • Unsubscribe & restore URLs yourinstance/plugins/servlet/speakeasy/unsubscribe yourinstance/plugins/servlet/speakeasy/restore 51
  • 54. Should you use it? • Do you trust your users? • Does your instance allow public signup? 54
  • 55. Cross-site scripting • inserting unescaped HTML into the page • from user input • from data you fetched 55
  • 56. XSS Example var result = "<script>alert();</script>"; var el = document.getElementById('myDiv');      56
  • 57. XSS Example var result = "<script>alert();</script>"; var el = document.getElementById('myDiv'); el.innerHTML = result; 57
  • 58. XSS Example var result = "<script>alert();</script>"; var el = document.getElementById('myDiv'); el.innerHTML = result; // BAD - Don’t do this! 58
  • 59. XSS Example var result = "<script>alert();</script>"; var el = document.getElementById('myDiv'); el.innerHTML = result; // BAD - Don’t do this! el.innerHTML = AJS.escapeHtml(result); // Do this instead. 59
  • 60. XSS Example var result = "<script>alert();</script>"; var el = document.getElementById('myDiv'); el.innerHTML = result; // BAD - Don’t do this! el.innerHTML = AJS.escapeHtml(result); // Do this instead. AJS.$(el).text(result); // Or this. 60
  • 61. Interested in learning more? Securing your Plugin - Penny Wyatt @ AtlasCamp 2010 Protip If you weren’t here last year or just enjoy nostalgia, check out the Atlascamp 2010 website for videos of every session. 61
  • 62. Where can you go from here?
  • 63. Product Compatibility • Speakeasy documentation • Extension repository • Remember: not just Confluence! 63
  • 64. Resources Speakeasy Documentation https://developer.atlassian.com/display/SPEAK/Speakeasy Speakeasy Source on github https://github.com/mrdon/speakeasy-plugin Speakeasy JARs https://maven.atlassian.com/content/repositories/atlassian-public/com/atlassian/labs/speakeasy-plugin/ 64
  • 65. TAKE-AWAYS “ Got an hour to spare? That’s enough time to ” prototype a new Confluence feature with Speakeasy. #atlascamp 65

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. easy to deploy // fast to deploy // social // per-user\n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n